1

これは私の以前の質問css, Wrap element Tight around unspecified number of imagesに似ていますが、追加の要件があることに気付きました。

画像を表示する要素があります。この要素は、画像の数に応じて水平方向に成長する必要があります。何枚の画像があるかは事前にわかりません。

また、画面が要素の最大幅よりも小さい場合、画像は次の行に移動し、外側の要素はそれに応じて縮小する必要があります。

http://jsfiddle.net/sXgzn/14/は問題を示しています。

編集：望ましい結果のより明確なフィドル： http://jsfiddle.net/sXgzn/23/

<div class = "outer">
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
</div>

フィドルから：画面を小さくして、一番上の行に太陽が2つだけになるようにします。黒の背景は、エッジに余分な黒を付けずに画像を包み込み続ける必要があります。

編集：明確にするために：上に2つ、次の行に1つ：2番目の画像の下に黒いスペースがあっても問題ありません。私は広い黒い右端が欲しくないだけです。

4

4 に答える 4

0

この問題の適切な解決策が見つからなかったので、JavaScript と少しの jQuery を使用して解決できます。

ライブデモ

HTML の例:

<div class="images">
  <img src="img1.jpg" />
  <img src="img2.jpg" />
  <img src="img3.jpg" />
</div>

CSS:

.images{
  background:#000;
  font-size:0;
}

.images img{
  width:90px;
  height:90px;
  background:#000;
  margin:5px;
}

jQuery:

var $img = $('.images img'),
    n = $img.length,
    w = 100;  // img width + margins

$(window).resize(function(){  
  var W = $('body').width(), 
      s = Math.min(~~(W/w)||1, n);
      $('.images').width(s*w);
}).resize();
于 2013-08-21T08:07:29.820 に答える