加载图像时保持 div 高度

Question

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

我可以通过在img-container 类上设置min-height 轻松完成此操作，但是它是一个流体网格并且图像是响应式的（注意引导程序的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

好的，假设所有图像都是正方形的，我们可以做到。在你的图片周围添加一个额外的div，如下所示：

<div class="img-container"> <div class="image-wrap">IMAGE HERE</div> </div>

那么我们想要CSS

.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}

.img-container:before{
content: "";
display: block;
padding-top: 100%; 
}

.image-wrap {
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

查看实际操作： http://jsfiddle.net/jamesking/LNvmY/

您需要删除在.img-container 中设置的宽度

Answer 2

因评论而编辑

如果您根本没有指定来源（甚至不是一个临时的虚拟来源），浏览器甚至不会尝试“猜测”图像的高度，因此它会崩溃。如果你知道图片的比例（如果是方形图片，显然是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 包括那些参数，这不是我们想要达到的效果（图像会比它应该的高一点）。

对于非方形图片：

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

---

有一种简单的方法可以做到这一点，但它仅适用于方形图像。
将图像的宽度（使用 CSS）指定为 100%。这样浏览器会自动假设图片的高度和宽度一样，并占据这个位置。

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

.test-image {
    width:100%;
}

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

编辑：见上文。