title: CSS Display an Image Resized and Cropped
body: <p>I want to show an image from an URL with a certain width and height even if it has a different size ratio. 
  So I want to resize (maintaining the ratio) and then cut the image to the size I want.
  <p>
  I can resize with html <code>img</code> property and I can cut with <code>background-image</code>.
  <br>
  How can I do both?</p>
  
  <p>Example:</p>
  
  <p>This image:</p>
  
  <p><img src="https://i.stack.imgur.com/wPh0S.jpg" alt="enter image description here"></p>
  
  <p><br>
  Has the size <code>800x600</code> pixels and I want to show like an image of <code>200x100</code> pixels</p>
  
  <p><br>
  With <code>img</code> I can resize the image <code>200x150px</code>:</p>
  
  <pre><code>&lt;img 
      style="width: 200px; height: 150px;" 
      src="http://i.stack.imgur.com/wPh0S.jpg"&gt;
  </code></pre>
  
  <p><br>
  That gives me this:</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-html lang-html prettyprint-override"><code>&lt;img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><br></p>
  
  <p>And with <code>background-image</code> I can cut the image <code>200x100</code> pixels.</p>
  
  <pre><code>&lt;div 
      style="background-image:
             url('https://i.stack.imgur.com/wPh0S.jpg'); 
      width:200px; 
      height:100px; 
      background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p><p>
  Gives me:</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-html lang-html prettyprint-override"><code>    &lt;div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"&gt;&amp;nbsp;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><p><br><p>
  How can I do both?
  <br>
  Resize the image and then cut it the size I want?</p>