CSS image properties format visual image presentation—including responsive width scaling, object fitting (object-fit), CSS filter effects (grayscale, blur, brightness), and rounded borders.
Key properties for controlling image appearance:
img {
max-width: 100%;
height: auto;
object-fit: cover; /* cover | contain | fill | scale-down */
border-radius: 50%; /* Makes square images circular */
filter: grayscale(80%) brightness(90%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%) brightness(100%);
}
Key properties explained:
object-fit: cover: Crops image content to fill container dimensions without stretching aspect ratios.border-radius: 50%: Turns square images into round avatar circles.filter: Applies visual effects like grayscale(), blur(), brightness(), contrast(), drop-shadow().flowchart TD
A["object-fit Options"] --> B["cover (Fills container, crops overflow edges)"]
A --> C["contain (Fits entire image inside container without cropping)"]
A --> D["fill (Default: Stretches image to exact container dimensions)"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Images Demonstration</title>
<style>
.avatar-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #38bdf8;
}
.filter-img {
width: 100%;
max-width: 400px;
border-radius: 8px;
filter: grayscale(60%);
transition: filter 0.3s ease;
}
.filter-img:hover {
filter: grayscale(0%);
}
</style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">
<h2>User Avatar & Filter Image</h2>
<div style="display: flex; gap: 2rem; align-items: center;">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb" alt="Avatar" class="avatar-img">
<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Workspace" class="filter-img">
</div>
</body>
</html>
max-width: 100%; height: auto; on images: Prevents images from overflowing past parent container edges on mobile devices.object-fit: cover when enforcing explicit widths and heights: Prevents image aspect ratio stretching distortion.border-radius: 50% on equal width/height images: Perfect for rendering user profile avatars.Create a CSS class .avatar that renders a 80px circle image using width: 80px; height: 80px; border-radius: 50%; object-fit: cover;!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.