Question

我在.img-container内有一个方形图像。有时需要几秒钟才能加载图像，.img-container会折叠，并且只在图像加载时占据整个高度。但是，我想在图像加载时保持整个高度（好像图像在那里）。

我可以通过在min-height类上设置img-container轻松完成此操作，但是它是一个流畅的网格，图像是响应式的（通知bootstrap的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的{{1}}即可。例如，如果要放置比例为2：1的图像，请将填充更改为div。要保持简短：容器50%的宽度和填充的比率应始终等于图像的宽度和高度的比率。

有一种简单的方法可以做到这一点，但仅适用于方形图像 指定图像的宽度（使用CSS）为 100％。通过这种方式，浏览器将自动假设图像高度与其宽度相同，并占据该位置。

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

div

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

编辑：见上文。

Answer 2

好的，假设所有图像都是正方形，我们就可以做到。在您的图片周围添加额外的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

中设置的宽度

在图像加载时保持div高度

2 个答案: