在图像加载时保持div高度

Question

我有一个方形图像.img-container.有时,图像加载和.img-container折叠需要几秒钟,并且只有在图像加载时才占据整个高度.但是,我想在图像加载时保持整个高度(就好像图像在那里).

我会通过设置已经很容易地做到了这一点min-height上img-container一流的,但它是一个流体网格,图像响应(注意引导的img-responsive辅助类),这使得它很难设定的最小高度为不同屏幕尺寸合适的值(虽然实现以媒体查询为最后手段).通过放置一个占位图像解决这个问题听起来像是一种矫枉过正(尤其是在移动设备上的性能).此外,不确定首先加载什么,占位符图像或实际图像.

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <div class="card">
      <span class="img-container thumbnail clearfix">
        <img alt class="pull-left img-responsive" src="http://...">
      </span>
      <div class="caption">
        <a href="http://.." class="card-title lead">
          Some text
        </a>
      </div>
    </div>
  </div>

Answer 1

编辑由于评论

如果您根本没有指定源(甚至不是虚拟的,临时的),浏览器甚至不会尝试"猜测"图像的高度,因此它会崩溃.如果您知道图像的比例(在方形图片的情况下显然是1:1),您可以使用以下技巧来占用空间,并将图像与div一起缩放.

设置以下CSS:

.test-div-inner {
    padding-bottom:100%;
    background:#EEE;
    height:0;
    position:relative;
}
.test-image {
    width:100%;
    height:100%;
    display:block;
    position:absolute;
}

然后您可以使用以下HTML:

<div class="test-div-inner">
    <img class="test-image" src="http://goo.gl/lO9SUU">
</div>

以下是工作示例:http://jsfiddle.net/pQ5zh/3/

请注意,小提琴包含另一个div元素,只有在您想要全部填充或填充时才需要这个元素,因为padding-bottom根据包含这些div 参数的宽度计算填充(以像素为单位),这不是我们想要的效果实现(图像会比它应该高一点).

对于非方形图像:

如果您想更改图片的比例,只需相应更改padding-bottom容器div.例如,如果要放置比例为2:1的图像,请将填充更改为50%.为了保持简洁:容器div的宽度和填充的比率应始终等于图像的宽度和高度的比率.

有一种简单的方法可以做到这一点,但它只适用于方形图像.
指定图像的宽度(使用CSS)为100%.这样浏览器将自动假设图像高度与其宽度相同,并占据该位置.

http://jsfiddle.net/pQ5zh/2/

.test-image {
    width:100%;
}

注意:有一种方法可以实现非方形图像,但这有点复杂.

编辑:见上文.