<div class="container">
  <h2>object-fit: cover</h2>
  <img id="img1" src="https://images.pexels.com/photos/1805053/pexels-photo-1805053.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="car">
  <h2>Without Object-fit:</h2>
  <img id="img2" src="https://images.pexels.com/photos/1805053/pexels-photo-1805053.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="car">
</div>
.container{
  display: flex;
  flex-direction: column;
  heigh: 100vh;
  align-items: center;
}
#img1{
  width: 250px;
  height: 180px;
  object-fit: cover;
}
#img2{
  width: 250px;
  height: 180px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.