CssHow-ToBeginner · 3 min read

How to Make Image Responsive in CSS: Simple Guide

To make an image responsive in CSS, use max-width: 100% and height: auto. This ensures the image scales down to fit its container without distortion.

📐

Syntax

Use the following CSS properties to make an image responsive:

max-width: 100% - Limits the image width to the container's width.
height: auto - Adjusts the height automatically to keep the image's aspect ratio.

css

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

💻

Example

This example shows an image that resizes to fit the width of its container while keeping its original proportions.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Image Example</title>
  <style>
    .container {
      width: 50%;
      border: 2px solid #333;
      padding: 10px;
      margin: auto;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://via.placeholder.com/800x400" alt="Sample Image">
  </div>
</body>
</html>

Output

A centered box with a border containing an image that scales down to fit the box width, maintaining its shape.

⚠️

Common Pitfalls

Common mistakes when making images responsive include:

Setting fixed width and height in pixels, which prevents scaling.
Using only width: 100% without height: auto, causing image distortion.
Not setting the container width, so the image may not resize as expected.

css

/* Wrong way: fixed size causes no responsiveness */
img {
  width: 400px;
  height: 200px;
}

/* Right way: flexible size with aspect ratio preserved */
img {
  max-width: 100%;
  height: auto;
}

📊

Quick Reference

Summary tips for responsive images:

Always use max-width: 100% to limit image width.
Use height: auto to keep proportions.
Ensure the image's container has a flexible or fixed width.
Use semantic <img> with alt text for accessibility.

✅

Key Takeaways

Use max-width: 100% and height: auto to make images scale responsively.

Avoid fixed pixel sizes on images to prevent layout issues on different screens.

Ensure the container width is set or flexible for the image to resize properly.

Always include alt text on images for better accessibility.