html - 使用 Bootstrap 响应式网格系统时如何为图像提供动态宽度和高度

Question

我正在使用 Bootstrap 的网格系统，这里是 my website .问题是在初始加载时，元素卡看起来很糟糕，如下所示:

这是加载后的样子:

如您所见，问题是因为我没有提供图像的宽度和高度，因此在加载图像之前，我看到了这种不太好的奇怪布局。我不提供宽度和高度的问题是因为这是响应式的，这样当我调整浏览器的宽度时，卡片的宽度也会改变，因此提供恒定的宽度和高度是行不通的。最好的解决方案是什么？

Answer 1

如果已知图像比率，则可以计算图像比率，然后将其填充设置为该比率

查看 js fiddle :

http://jsfiddle.net/J8AYY/7/

<div class="img-container">
    <img src="">
</div>

.img-container {
    position:relative;
    padding-top:66.59%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

因此，如果您的图片宽度为 2197 像素，高度为 1463 像素

然后将包含图像的容器设置为 padding-top 1463/2197*100% 然后将图像设置为绝对位置 现在你的图像可以响应并且不用担心容器崩溃