1

Webページの最上部に並べて表示したい4つの画像（すべて同じ幅とすべて同じ高さ）がありますが、トリックは$(window).width()jQueryでブラウザーの幅全体を占める必要があるということです。

私の質問は次のとおりです。

まず、これは可能ですか？

もしそうなら：

  1. すべてのブラウザ幅（またはほとんどのブラウザ幅）でこれを行うための最良の方法は何ですか？
  2. 4枚ではなく1枚の画像にする必要がありますか？
  3. どちらの方法の長所/短所は何ですか（1つの画像と4つの画像、およびその逆）？
  4. jQueryまたは別の言語を使用して画面の幅を計算し、画面の幅が異なるごとに異なるサイズの画像を読み込む必要がありますか？または、これはCSSでネイティブに実行できますか？
  5. 4つの画像すべてにどの幅のサイズを使用することをお勧めしますか、またはこれらの画像を1つの画像にした場合、どの幅よりも推奨されますか？

注：画像を広げたくないので、画像が歪んで見える原因になりますが、大きな画像を使用してサイズを小さくすると、ページの読み込み（パフォーマンスの低下）に影響します。外観やパフォーマンスを犠牲にする必要がないようにするには、どうすればよいですか？可能であれば、電話でも正しく見えるようにしたいと思います...しかし、それは大きな優先事項ではありませんが、可能であればいいでしょう。

4

2 に答える 2

1

スケーラビリティに関心がある場合は、可能であれば、4つの画像を1つの画像にすることをお勧めします。次に、画像のサイズを指定することもできます。これは、ブラウザが各画像のサイズを把握する必要がないため、読み込みに役立ちます（幅のサイズにパーセンテージを指定した場合に必要になります）。これが何らかの背景用である場合は、おそらく、ブラウザが画像のサイズよりも広い幅に拡大したときに、それが永遠に繰り返されるように最後の画像を編集します（たとえば、CSSでの背景の繰り返し）...

于 2013-03-19T23:16:45.010 に答える
1

画像は親要素の幅の50％に設定する必要があります。私の例では、その親要素は本体です。

<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>
<img class='half-width-img' src='http://wallpapers.free-review.net/wallpapers/42/Big_wave.jpg'/>

Css：

.half-width-img{
width:25%;
height:auto;
float:left;
}
html,body{
margin:0 0 0 0;
padding:0 0 0 0;
}

http://jsfiddle.net/j7L4h/2/

于 2013-03-19T23:23:53.420 に答える