css – 在加载图像时保持div高度

我在.img容器内有一个正方形的图像.有时,加载图像需要几秒钟,而.img容器崩溃,并且只有在图像加载时才需要完整的高度.但是,我希望在图像加载时保持完整的高度(如图像所在).

我可以通过在img-container类中设置最小高度来轻松完成此任务,但它是一个流畅的网格,图像响应(通知引导程序的img响应帮助器类),这使得很难将最小高度设置为适用于不同屏幕尺寸的值(尽可能使用媒体查询作为最后手段).
通过放置地方图像来解决这个问题,听起来像是一个过度的杀手(特别是在手机上表现明智).此外,不确定先加载什么,占位符图像或实际图像.

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

解决方法

编辑评论

如果您根本没有指定源代码(甚至不是虚拟的),浏览器甚至不会尝试“猜测”图像的高度,因此它会崩溃.如果你知道图像的比例(在一个正方形图片的情况下显然是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%;
}

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

编辑：见上文.

原文地址：https://www.jb51.cc/css/214122.html