how to give image a dynamic width and height when using bootstrap responsive grid system

Question

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?

Answer 1

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