title: Stretch and fill image in Bootstrap carousel
body: <p>I am using <code>bootstrap</code> carousal and having some problem with image height and width. Even though I define it in the <code>img</code> attribute it still displays as original resolution. Following is the code I am using:</p>
  <pre><code>&lt;div class=&quot;col-md-6 col-sm-6&quot;&gt;
      &lt;div id=&quot;myCarousel&quot; class=&quot;carousel slide&quot;&gt;
          &lt;div class=&quot;carousel-inner&quot;&gt;
              &lt;div class=&quot;item active&quot;&gt;
                  &lt;img src=&quot;http://placehold.it/650x450/aaa&amp;text=Item 3&quot; height=&quot;300&quot; width=&quot;300&quot; /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;item&quot;&gt;
                  &lt;img src=&quot;http://placehold.it/350x350/aaa&amp;text=Item 3&quot; height=&quot;300&quot; width=&quot;300&quot; /&gt;
              &lt;/div&gt;
              &lt;div class=&quot;item&quot;&gt;
                  &lt;img src=&quot;http://placehold.it/350x350/aaa&amp;text=Item 3&quot; height=&quot;300&quot; width=&quot;300&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Controls --&gt;
          &lt;a class=&quot;left carousel-control&quot; href=&quot;#myCarousel&quot; data-slide=&quot;prev&quot;&gt;
              &lt;span class=&quot;icon-prev&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class=&quot;right carousel-control&quot; href=&quot;#myCarousel&quot; data-slide=&quot;next&quot;&gt;
              &lt;span class=&quot;icon-next&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is <a href="https://jsfiddle.net/a1x1dnaa/" rel="nofollow noreferrer">demo</a> of that.</p>
  <p>What should I do to fill the image in a certain height and width regardless of its original resolution?</p>