Responsive Images
CSS object-fit and aspect-ratio let images scale without distortion at any container size.
CSS
Beginner
3 min read
Responsive Images with CSS
Example
.img-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.img-contain { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #f5f5f5; }
picture source, img { max-width: 100%; height: auto; display: block; } Pro Tip
Set aspect-ratio on the container and object-fit: cover on the image to prevent layout shift.