CSS Style Images
CSS gives you a lot of control over how images render — rounding, cropping, filtering, sizing — without ever editing the source file.
The most-used image properties
| Property | Effect |
|---|---|
border-radius | Rounded corners. 50% for circular avatars. |
object-fit | cover crops to fill; contain fits inside. |
object-position | Where the kept part sits. |
aspect-ratio | Lock the shape regardless of source. |
filter | Greyscale, blur, brightness, hue-rotate… |
mix-blend-mode | Blend the image with the background. |
clip-path | Crop the image to any shape. |
Avatar in three lines
CSS
.avatar {
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
}
Polaroid card
CSS
.polaroid img {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
filter: saturate(1.1) contrast(1.05);
border-radius: 4px;
}
Tip: Combine
aspect-ratio with object-fit: cover for galleries — every tile keeps a consistent shape no matter the source image.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Style Images</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Crop this thumbnail to a square without distortion.
.thumb { width: 120px; height: 120px; object-fit:
; }
Fills the box; crops the overhang.
Discussion
Loading…