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

时间:2012-06-26 00:37:36

标签: javascript jquery html css css3

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

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

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

以下是图像加载(丑陋!)之后的样子的说明。

enter image description here

代码:

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

1 个答案:

答案 0 :(得分:0)

除非您实际加载图像(在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' });
  }
});