異なるWeb要素位置

画像1 1920X1080：異なるWeb要素位置

画像2 1400X1050：あなたがイメージ1から見ることができるように

iは解像度1920X1080でそれを設計し、それはすごく見えるが、私が解決1400X1050でそれを開くと、それはpictのように恐ろしく見える2.誰も私にこのケースのための最善の解決策を提案することはできますか？

HERESに私の背景CSS：

body { 

background-image: url(images/background-photo.jpg); 


background-position: center center; 


background-repeat: no-repeat; 


background-attachment: fixed; 


background-size: 100% auto; 


background-color:#245528; 



} 

/* For mobile devices */ 
@media only screen and (max-width: 767px) { 
body { 

background-image: url(images/background-photo-mobile-devices.jpg); 
    background-size: cover; 
} 
}

出典

2017-03-13 Joshua Gani Wijaya

あなたは、任意のCSSフレームワークを使用していますか？あなたはそれとその流体/応答性のあるデザインタグを調べたいかもしれません。 –

ここにコードを投稿してください – Varun

@Varun Done、私はすでにそれを更新しています。 –

あなたは、異なる解像度で良い方法で画像を表示したい場合、あなたは、異なる解像度のための異なるイメージを持っている必要があります。あなたはsrcsetを使用して、それを実装することができます

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

出典：Responsive Images: If you’re just changing resolutions

出典

2017-03-13 07:32:29

私はその情報をありがとう、感謝します。 –

を私はあなたのケースのために右のスタイルは

background-size: contain;

代わりの

background-size: 100% auto;

contain意志だと思います常にコンテナ要素に表示されるイメージを維持します。画像の幅や高さが小さすぎる場合は、画像のサイズを変更しようとするので、画像全体が表示されます（上/左または下/右に空白がある可能性があります）。代わりに、100% autoは、画像を画面の幅と同じにするために画像を伸ばしようと常に試みます。

出典

2017-03-14 01:59:00 Simon

答えて

関連する問題