CSS Images

CSS can resize, round, crop and filter images. These are the most useful tricks.

Responsive image

img { max-width: 100%; height: auto; }

The image can shrink on small screens, but never grows bigger than its real size.

.rounded { border-radius: 12px; }
.avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; }

Output in the browser

When you force a width and a height on an image, it can look stretched. object-fit decides how the image fills the box.

Value	Result
`fill`	Stretches to fit (default)
`cover`	Fills the box and crops the extra part. Good for avatars and thumbnails
`contain`	Shows the whole image, with empty space if needed

img.gray { filter: grayscale(100%); }
img.blur { filter: blur(3px); }
img:hover { filter: none; }

grayscale and blur

.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery img { width: 150px; height: 100px; object-fit: cover; }

For images in HTML, see HTML Images. For a background image, see CSS Background.

Congratulations! Chapter Finished. Learn more about the similar topics:

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.