Bootstrap responsive images and fix sized thumbnails
<p>I am new to bootstrap so please forgive me if my question is trivial. I have a page that is displaying rows of images (4x4). However, the images are of different sizes. What I want to do is display the images as thumbnails (fixed sizes: height = 200px, width 300px) but I still want to maintain the responsiveness of my page. So, when the screen size changes, it uses bootstrap responsive css. I tried setting the fixed width and height in <code>img-thumbnail</code> but I loose the responsiveness. Any suggestions? By the way, I am using Asp.net MVC, if anyone wants to know.</p>

<p><strong>Bootstrap</strong></p>

<pre><code>.img-responsive,
.thumbnail &gt; img,
.thumbnail a &gt; img,
.carousel-inner &gt; .item &gt; img,
.carousel-inner &gt; .item &gt; a &gt; img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
</code></pre>

<p><strong>My Index Page</strong></p>

<p></p>

<pre><code>&lt;img class="img-thumbnail img-responsive" src="@Model.ItemPaged.ElementAt(x).src" alt=""&gt;

&lt;/div&gt;
</code></pre>