css - 加载图像时保持 div 高度

Question

我在 .img-container 中有一个方形图像。有时加载图像需要几秒钟，并且 .img-container 折叠并且仅在图像加载时占据完整高度。但是，我希望它在加载图像时保持全高(就像图像在那里一样)。

我可以通过在 img-container 类上设置 min-height 来轻松完成此操作，但是它是一个流动的网格并且图像是响应式的(注意 Bootstrap 的 img-responsive helper 类)，这使得很难将最小高度设置为适合不同屏幕尺寸的适当值(尽管作为最后的手段可以通过媒体查询实现)。通过放置占位图像来解决这个问题听起来有点矫枉过正(尤其是在移动设备上的性能方面)。此外，不确定先加载什么，是占位符图像还是实际图像。

<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/

请注意，fiddle 包含另一个 div 元素，只有当您想给它所有填充或边框时才需要这样做，因为 padding-bottom 根据 div INCLUDING THOSE PARAMETER 的宽度计算以像素为单位的填充，这不是我们想要达到的效果(图像会比它高一点应该是)。

对于非正方形图像:

如果你想改变图片的比例，只需相应地改变容器div的padding-bottom即可。例如，如果您想放置一张比例为 2:1 的图像，请将填充更改为 50%。简而言之:容器 div 的宽度和内边距的比例应始终等于图像的宽度和高度的比例。

---

有一种简单的方法可以做到这一点，但它仅适用于方形图像。
将图像的宽度(使用 CSS)指定为 100%。这样浏览器会自动假定图像高度与其宽度相同，并全神贯注于该位置。

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

.test-image {
    width:100%;
}

注意:对于非正方形图像也有一种方法可以实现这一点，但有点复杂。

编辑:见上文。