Home » Learn » CSS Tutorial » CSS Images

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 and circle images

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

object-fit

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

ValueResult
fillStretches to fit (default)
coverFills the box and crops the extra part. Good for avatars and thumbnails
containShows the whole image, with empty space if needed

Filters

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

Simple image gallery

.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.

Summary

  • Use max-width: 100% for responsive images.
  • border-radius: 50% makes circles, and object-fit: cover avoids stretching.
  • filter adds effects like grayscale and blur.
  • Next: CSS Flexbox.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.