[CSS 3] Apply Aspect Ratio Sizing to Images with CSS object-fit

The CSS property object-fit instructs an img to act as the container for its own contents. We can then use the value cover to have the image content behave similar to a background-image by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value scale-down.

 

.object-fit-cover .card img {
  object-fit: cover;
  width: 100%;
  height: 25vh;
  border-radius: 8px 8px 0 0;
}

.object-fit-scale-down .card img {
  object-fit: scale-down;
  width: 100%;
  height: 25vh;
  padding: 1rem;
}