Fits an positions an image appropriately inside its container while preserving its aspect ratio.
object-fit: contain
to fit the entire image within the container while preserving its aspect ratio.object-fit: cover
to fill the container with the image while preserving its aspect ratio.object-position: center
to position the image at the center of the container.<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
.image {
background: #34495e;
border: 1px solid #34495e;
width: 200px;
height: 200px;
}
.image-contain {
object-fit: contain;
object-position: center;
}
.image-cover {
object-fit: cover;
object-position: right top;
}
CSS, Layout
Hides an element completely (visually and positionally) in the DOM while still allowing it to be accessible.
CSS, Layout
Displays a menu overlay when the user hovers over the image.
CSS, Layout
Creates a responsive image mosaic.