Responsive Images and Object Fit
What Is It?
CSS can keep images inside their container or crop them into a consistent frame while preserving their proportions.
Properties, Tags and Attributes Explained
max-width: 100%: Prevents an image exceeding its containing width.height: auto: Preserves intrinsic proportions when width changes.object-fit: cover: Fills a specified content box while cropping if necessary.object-fit: contain: Shows the whole replaced content, leaving space if proportions differ.aspect-ratio: Sets a preferred width-to-height ratio.object-position: Positions replaced content such as an image inside its content box. With object-fit: cover, it controls which part remains visible after cropping.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Fluid image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images and Object Fit</title>
<style>
img { max-width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<img width="400" height="200" alt="Purple and blue abstract landscape" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27400%27 height=%27200%27%3E%3Crect width=%27400%27 height=%27200%27 fill=%27%23bfdbfe%27/%3E%3Ccircle cx=%27200%27 cy=%27100%27 r=%2780%27 fill=%27%237c3aed%27/%3E%3C/svg%3E">
</body>
</html>What you see: The image shrinks to fit narrow containers without stretching.
Example 2: Cropped thumbnail
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images and Object Fit</title>
<style>
img { width: 160px; height: 100px; object-fit: cover; border-radius: 12px; }
</style>
</head>
<body>
<img alt="Orange circle on a green background" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Crect width=%27200%27 height=%27200%27 fill=%27%23dcfce7%27/%3E%3Ccircle cx=%27100%27 cy=%27100%27 r=%2780%27 fill=%27%23f97316%27/%3E%3C/svg%3E">
</body>
</html>What you see: The square source is cropped into a landscape thumbnail.
Example 3: Choose the visible crop with object-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images and Object Fit</title>
<style>
img { width: 120px; height: 120px; object-fit: cover; border: 2px solid #64748b; }
.left { object-position: left center; }
.right { object-position: right center; }
</style>
</head>
<body>
<p>Left crop, then right crop:</p><img class="left" alt="Left crop showing a blue circle" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27360%27 height=%27120%27%3E%3Crect width=%27360%27 height=%27120%27 fill=%27%23e2e8f0%27/%3E%3Ccircle cx=%2760%27 cy=%2760%27 r=%2745%27 fill=%27%232563eb%27/%3E%3Ccircle cx=%27300%27 cy=%2760%27 r=%2745%27 fill=%27%23f97316%27/%3E%3C/svg%3E"> <img class="right" alt="Right crop showing an orange circle" src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27360%27 height=%27120%27%3E%3Crect width=%27360%27 height=%27120%27 fill=%27%23e2e8f0%27/%3E%3Ccircle cx=%2760%27 cy=%2760%27 r=%2745%27 fill=%27%232563eb%27/%3E%3Ccircle cx=%27300%27 cy=%2760%27 r=%2745%27 fill=%27%23f97316%27/%3E%3C/svg%3E">
</body>
</html>What you see: The same wide source produces two different square crops. Use object-position to keep a subject visible in thumbnails.
When and Where to Use It
Use fluid images in articles and object-fit cover for uniform product cards or avatars.
Common Mistake or Useful Tip
Keep meaningful alt text in HTML. A CSS background has no alt attribute and should not carry essential image content.
Try It Yourself
Switch cover to contain and compare the visible image area.