<div class="item">

  <h2>Original image</h2>  

  <p>

    <img src="https://satyr.dev/150x150?text=Abc" width="150" height="150" alt="Image…">

  </p>

</div>  

​

<div class="container">

  <div class="item">  

    <h2><code>object-fit: fill</code> (default)</h2>

    <p class="box box--fill">

      <img src="https://satyr.dev/150x150?text=Abc" width="300" height="200" alt="Image…">

    </p>  

  </div>   

  <div class="item">  

    <h2><code>object-fit: contain</code></h2>

    <p class="box box--contain">

      <img src="https://satyr.dev/150x150?text=Abc" width="300" height="200" alt="Image…">

    </p>  

  </div>  

  <div class="item">  

    <h2><code>object-fit: scale-down</code></h2>

    <p class="box box--scale-down">

      <img src="https://satyr.dev/150x150?text=Abc" width="300" height="200" alt="Image…">

    </p>  

  </div>     

  <div class="item">  

    <h2><code>object-fit: cover</code></h2>

    <p class="box box--cover">

      <img src="https://satyr.dev/150x150?text=Abc" width="300" height="200" alt="Image…">

    </p>  

  </div>     

​

  <div class="item">  

    <h2><code>object-fit: none</code></h2>

    <p class="box box--none">

      <img src="https://satyr.dev/150x150?text=Abc" width="300" height="200" alt="Image…">

    </p>  

  </div>   

</div>