title: image height fix even in responsive without image stretching
body: <p>i want image height fix exact 300px even in responsive screen without image stretching. While i try <code>object-fit: cover;</code>and its work what i want but its only compatible with the very latest browsers. 
  Please avoid to stupid answers. </p>
  
  <pre><code>.container {
          width:100%;
          height:300px;
  }
  
  .container img {
          width:100%;
          height:300px;
          }
  
   &lt;div class="container"&gt;
   &lt;img src="images/bnr1.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>