title: CSS Image size, how to fill, but not stretch?
body: <p>I have an image, and I want to set it a specific width and height (in pixels)</p>
  
  <p>But If I set width and height using css (<code>width:150px; height:100px</code>), image will be stretched, and It may be ugly.</p>
  
  <p>How to <strong>Fill</strong> images to a specific size using CSS, and <strong>not stretching</strong> it?</p>
  
  <p>Example of fill and stretching image:</p>
  
  <p>Original Image:</p>
  
  <p><img src="https://i.stack.imgur.com/2OrtT.jpg" alt="Original"></p>
  
  <p>Stretched Image:</p>
  
  <p><img src="https://i.stack.imgur.com/L1ihk.jpg" alt="Stretched"></p>
  
  <p>Filled Image:</p>
  
  <p><img src="https://i.stack.imgur.com/vwi7R.jpg" alt="Filled"></p>
  
  <p><strong>Please note that in the Filled image example above: first, image is resized to 150x255 (maintained aspect ratio), and then, it <em>cropped</em> to 150x100.</strong></p>