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

Question

我正在使用bootstrap的网格系统,这是我的网站.问题是,在初始加载时,项目卡看起来很糟糕,如下所示:

这是加载后的样子:

你可以看到问题是因为我没有提供图像的宽度和高度,因此在加载之前我看到这个奇怪的布局并不好.我没有提供宽度和高度的问题是因为这是响应性的,因此当我调整浏览器的宽度时,卡的宽度也会改变,因此提供恒定的宽度和高度不起作用.什么是最好的解决方案？

Answer 1

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

看看js小提琴:

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/2177*100%然后将图像设置为绝对位置,现在您的图像可以响应并且无需折叠容器