HtmlHow-ToBeginner · 3 min read

How to Make Image Responsive in HTML: Simple Guide

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

📐

Syntax

Use the <img> tag with CSS properties to control its size responsively.

max-width: 100% limits the image width to the container's width.
height: auto keeps the image's height proportional to its width.

html

<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">

Output

An image that scales down to fit its container width while keeping its aspect ratio.

💻

Example

This example shows a responsive image inside a container that resizes when the browser window changes size.

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;
  }
  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 bordered box half the browser width containing an image that shrinks or grows to fit inside without distortion.

⚠️

Common Pitfalls

Common mistakes when making images responsive include:

Setting fixed width or height in pixels, which prevents scaling.
Not using height: auto, causing image distortion.
Forgetting to add max-width: 100%, so images overflow their containers.

html

<!-- Wrong way: fixed size causes overflow -->
<img src="image.jpg" alt="Wrong" width="500" height="300">

<!-- Right way: responsive scaling -->
<img src="image.jpg" alt="Right" style="max-width: 100%; height: auto;">

Output

The first image may overflow or not resize; the second image scales properly inside its container.

📊

Quick Reference

Property	Purpose	Example Value
max-width	Limits image width to container size	100%
height	Keeps image height proportional	auto
width	Avoid fixed pixel width for responsiveness	Use % or auto
display	Removes extra space below image	block

✅

Key Takeaways

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

Avoid fixed pixel widths or heights to prevent images from overflowing or distorting.

Wrap images in containers with flexible widths for better layout control.

Add alt text for accessibility and SEO.

Use the viewport meta tag for proper scaling on mobile devices.