twitter-bootstrap 加载图像时保持 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21992210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep div height while the image is loading
提问by Sbbs
I have a square image within .img-container. Sometimes it takes a few seconds for an image to load and the .img-containercollapses and only takes the full height when the image loads. However, I would like it to keep the full height (as if the image is there) while the image is loading.
我在.img-container. 有时加载图像需要几秒钟并且.img-container折叠并且仅在图像加载时占据整个高度。但是，我希望它在加载图像时保持全高（就像图像在那里一样）。
I would've easily done this by setting a min-heighton img-containerclass, however it's a fluid grid and the image is responsive (notice bootstrap's img-responsivehelper class) which makes it hard to set the min-height to an appropriate value for different screen sizes (although achievable with media queries as a last resort).
Solving this by putting a placeholding image sounds like an overkill (especially performance wise on mobile). Also, not sure what would load first then, the placeholder image or the actual image.
我本来可以通过设置一个min-heightonimg-container类来轻松做到这一点，但是它是一个流体网格并且图像是响应式的（注意引导程序的img-responsive帮助程序类），这使得很难将 min-height 设置为不同屏幕尺寸的适当值（尽管可以实现）媒体查询作为最后的手段）。通过放置占位图像来解决这个问题听起来有点矫枉过正（尤其是在移动设备上的性能方面）。此外，不确定首先加载什么，占位符图像或实际图像。
<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>
采纳答案by skreborn
EDIT DUE TO COMMENT
由于评论而编辑
If you do not specify a source at all (not even a dummy, temporary one), the browser will not even try to "guess" the image's height, and so it collapses. If you know the ratio of the image (it's obviously 1:1 in case of a square picture), you can use the following trick to preoccupy the space, and scale the image along with the div.
如果您根本不指定源（甚至不是虚拟的临时源），浏览器甚至不会尝试“猜测”图像的高度，因此它会崩溃。如果您知道图像的比例（在方形图片的情况下显然是 1:1），您可以使用以下技巧来占据空间，并将图像与 div 一起缩放。
Set the following CSS:
设置以下 CSS：
.test-div-inner {
padding-bottom:100%;
background:#EEE;
height:0;
position:relative;
}
.test-image {
width:100%;
height:100%;
display:block;
position:absolute;
}
Then you can use the following HTML:
然后您可以使用以下 HTML：
<div class="test-div-inner">
<img class="test-image" src="http://goo.gl/lO9SUU">
</div>
Here is the working example: http://jsfiddle.net/pQ5zh/3/
这是工作示例：http: //jsfiddle.net/pQ5zh/3/
Note that the fiddle contains another divelement, this is only required if you would like to give it all a padding or border, since the padding-bottomcalculates the padding in pixels based on the width of the divINCLUDING THOSE PARAMETERS, which is NOT the effect we want to achieve (the image would be a little taller than it should be).
请注意，小提琴包含另一个div元素，仅当您想给它全部填充或边框时才需要这样做，因为它padding-bottom根据divINCLUDING THOSE PARAMETERS的宽度计算以像素为单位的填充，这不是我们想要的效果实现（图像会比它应该高一点）。
For non-square images:
对于非方形图像：
If you would like to change the ratio of the picture, just change the padding-bottomof the container divaccordingly. For example, if you would like to place an image with a ratio of 2:1, change the padding to 50%. To keep it short: the ratio of the container div's width and padding should always be equal to the ratio of the image's width and height.
如果您想更改图片的比例，只需相应地更改padding-bottom容器的比例即可div。例如，如果您想放置比例为 2:1 的图像，请将填充更改为50%。为了保持简短：容器div的宽度和填充的比率应始终等于图像的宽度和高度的比率。
There is an easy way to do exactly this, but it only works for square images.
Specify the width of the image (using CSS) to be 100%. This way the browser will automatically assume that the image height is the same as it's width, and preoccupy the place.
有一种简单的方法可以做到这一点，但它仅适用于方形图像。
将图像的宽度（使用 CSS）指定为100%。这样浏览器会自动假定图像高度与其宽度相同，并专注于该位置。
.test-image {
width:100%;
}
Note: There is a way to achieve this for non-square images too, but that is a bit more complicated.
注意：对于非方形图像也有一种方法可以实现这一点，但这有点复杂。
EDIT: See above.
编辑：见上文。
回答by James King
Ok, assuming all images are square, we can do it. Add an extra divaround your image like this:
好的，假设所有图像都是方形的，我们可以做到。div在您的图像周围添加额外的内容，如下所示：
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
<div class="img-container">
<div class="image-wrap">IMAGE HERE</div>
</div>
Then we want CSS along the lines of
然后我们想要 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;
}
See this in action: http://jsfiddle.net/jamesking/LNvmY/
看看这个：http: //jsfiddle.net/jamesking/LNvmY/
You'll want to remove the width set in .img-container
您将要删除设置的宽度 .img-container
