我在.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％.这样浏览器会自动假定图像的高度与宽度相同,并且占据该位置.
.test-image {
width:100%;
}
注意：有一种方法可以实现非正方形图像,但这有点复杂.
编辑：见上文.
