title: To crop/resize an image to change the aspect ratio using CSS
body: <p>I have an image of size 700px(width) x 333px(height) which have aspect ratio 2.10. I want to display this image in size 327px(width)and 183px(height) with aspect ratio 16:9.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 16:9 and displayed as 327px(width)and 183px(height).Following is the code I tried.
  <code>object-fit: cover;</code> works fine, it crops and resizes the image to size 327px X 183px but it is not supported on all/older browsers versions. What could be an alternative to achieve the same result through CSS supported on all and older browsers?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*original image  :  http://starmoz.com/images/lancia-gamma5.jpg */</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cropAndResize {
      width: 327px;
      height: 183px;
      object-fit: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div&gt;
      &lt;img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize"&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>