将Div的大小设置为与其子级相同（在子级加载之前）

Question

我有一个包含.photo_container的父div img，并使用其img CSS属性延伸到此display: inline-block的维度。

问题：因为页面上会有很多.photo_container div，并且图片需要一些时间才能加载，所有img加载之前，页面都会被填充使用微小的未拉伸div（带有几px填充），然后逐渐扩展以容纳每个img，同时逐个加载。

是否可以将div“预拉伸”到正确的大小，以便在其子img加载时，不必更改其大小？

以下是图像加载（丑陋！）之后的样子的说明。

代码：

<div class="photo_box">
    <img src="..." />
</div>

Answer 1

除非您实际加载图像（在JS或CSS中），否则无法知道图像尺寸。因此，如果您使用JS并动态设置容器尺寸并不重要 - 您仍然需要首先加载图像，因此有一段时间您将显示“丑陋”的空容器。

因此，请将最小尺寸添加到.photo_container。我看起来至少所有拇指的宽度都是一致的，所以做.photo_container { min-width:100px; min-height:50px }之类的事情。然后为每个图像添加一个onLoad回调，相应地调整父级的大小。

如果您使用jQuery，请执行以下操作：

$('.photo_container img').each(function() {
  $(this).bind('load', function() {
    var w = $(this).width(),
        h = $(this).height();
    $(this).parent('.photo_container').attr({ width: w+'px', height: h+'px' });
  }
});