jquery - 无论屏幕大小如何，将元素环绕在图像周围

Question

这类似于我之前的问题 css, Wrap element tightly 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>

来自 Fiddle:缩小屏幕，使顶行只有 2 个太阳。黑色背景应该继续环绕图像，边缘没有额外的黑色。

编辑:为了清楚起见:顶部有 2，下一行有 1:第二张图片下方有黑色空间是可以的。我只是不想要宽阔的黑色右边缘。

Answer 1

因为我没有找到解决这个问题的合适方法，您可以使用 JavaScript 和一些 jQuery 来解决:

LIVE DEMO

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();