<h3>background-image</h3>
<div class="background-image-container"></div>

<h3>object-fit</h3>
<div class="object-fit-container">
  <img src="https://i.imgur.com/W7xqcWS.jpg" alt="landscape" />
</div>
.background-image-container {
  width: 300px;
  height: 300px;
  background-image: url("https://i.imgur.com/W7xqcWS.jpg");
  background-size: cover;
  background-position: center;
}

.object-fit-container {
  width: 300px;
  height: 300px;
  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.