<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>
.box--none > img {    
  object-fit: none; 
}

.box--cover > img {    
  object-fit: cover; 
}

.box--contain > img {    
  object-fit: contain; 
}

.box--fill > img {    
  object-fit: fill; 
}

.box--scale-down > img {    
  object-fit: scale-down; 
}

/* etc: */

body {
  font-family: sans-serif;
}

.box {
  background: #d8f5b8;
  border: #5fa316 5px solid;
  width: 300px;
}

img {
  display: block;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.