如何使用引导响应网格系统时给图像一个动态宽度和高度 [英] how to give image a dynamic width and height when using bootstrap responsive grid system

问题描述

我使用的是bootstrap的网格系统，这里是

 < 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％
然后将图像设置为绝对
现在您的图像可以反应迅速，无需折叠集装箱

I am using bootstrap's grid system and here's my website. The issue is that on initial load the item card looks pretty crappy like this:

and here's what it looks like after it loads:

As you can see the issue is because I am not supplying the image's width and height and hence before it load I am seeing this weird layout which is not good. The issue why I am not supplying a width and height is because this is responsive, such that when I resize the width of the browser then the width of the card also changes, and hence supplying a constant width and height doesn't work. What's the best solution out of this?

解决方案

You can calculate your image ratio if it's known then set its padding to the ratio

Check out the 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%;
}

So if your image has width 2197 pixels and height 1463 pixels

then set the container that contain the image to have padding-top 1463/2197*100% then set your image to position absolute now your image can be responsive and worry free of collapsing container

这篇关于如何使用引导响应网格系统时给图像一个动态宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！