[ACCEPTED]-how to give image a dynamic width and height when using bootstrap responsive grid system-twitter-bootstrap-3

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

Check 7 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 6 2197 pixels and height 1463 pixels

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

You need to put your thumbnails in a dynamically 15 sized container, whose height is proportional to it's width. You can do this by matching 14 width and padding-bottom on the container, as well as a few 13 other specifics as in the Bootply and example 12 below:

Bootply

Example:

CSS:

.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%; <!-- matching this to above makes it square -->
     float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

HTML:

<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
  <div class="row">

  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo" /> <!-- No Photo, but it still scales -->
      </div>
    </div>  
</div>

You'll notice that 11 in the last thumbnail, even though there 10 is no file loaded, the container is square. This 9 is the key that will fix your specific issue.

Note: matching 8 padding-bottom to width will give you a square thumbnail container, but 7 you can make it any proportion you want, by 6 adjusting the padding-bottom %.

Note2: because you haven't shared 5 your code, you'll probably have to do a 4 bunch of class renaming and testing to get 3 this to work. I had to guess at your setup 2 based on what I saw on your site. Hope it 1 helps!

If you're working with images that are all 6 the same size, you can set a min-height 5 on the image element for each step of the 4 responsive page. You would have to find 3 out how tall the images are at each step 2 of the responsive page design, but it could 1 look something like this:

.item-card img {
  min-height: 100px;
}

// Small screen
@media (min-width: 768px) {
  .item-card img {
    min-height: 150px;
  }
}

// Medium screen
@media (min-width: 992px) {
  .item-card img {
    min-height: 200px;
  }
}

// Large screen
@media (min-width: 1200px) {
  .item-card img {
    min-height: 250px;
  }
}

As far as I understand your question you 8 want the image to auto adjust when the browser 7 is resized. We can achieve this using the 6 css below.

.image-box img {
    width: 100%; 
}

If we only specify the width of 5 the image the height will be auto calculated. It 4 will maintain the aspect ratio for the image. Width 3 100% will exactly fit the container of the 2 image. This code may not work for background 1 image.

Your problem is that at load time, the img has 9 a height=0 and width=100%. So, you have 8 an empty image when the page loads.

You can 7 consider using an Image Preloader:

• ImageLoaderJS
• PreloadJS

If you 6 want all the images to have the same height, then 5 use the Fake Crop jQuery plugin. Actually, it doesn't 4 crop the image file, but the image gets 3 a "cropped" effect using CSS Positioning 2 properties.

Also, you can assign a min-height to the 1 container:

 .product-view .img-responsive {min-height:352px; background:#fff;}

You can also look into Lazy Loading:

• LazyLoad
• Lazy Loading Images
• ...