CssHow-ToBeginner · 3 min read

How to Create Responsive Images with CSS

To create responsive images, use CSS properties like max-width: 100% and height: auto to make images scale within their containers. For more control, use the HTML <picture> element with different image sources for various screen sizes.

📐

Syntax

Use CSS properties to make images scale properly inside their containers:

max-width: 100% ensures the image never grows wider than its container.
height: auto keeps the image's height proportional to its width.
The <picture> element allows specifying different images for different screen sizes using <source> tags with media queries.

css/html

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

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px) and (max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Responsive example">
</picture>

💻

Example

This example shows an image that scales down on smaller screens and uses different image files for different screen widths.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Image Example</title>
  <style>
    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    }
    body {
      max-width: 600px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Responsive Image Demo</h1>
  <picture>
    <source media="(max-width: 400px)" srcset="https://via.placeholder.com/300x200?text=Small+Image">
    <source media="(max-width: 800px)" srcset="https://via.placeholder.com/600x400?text=Medium+Image">
    <img src="https://via.placeholder.com/900x600?text=Large+Image" alt="Sample responsive image">
  </picture>
  <p>Resize the browser window to see the image change size and source.</p>
</body>
</html>

Output

A centered image that changes size and source depending on the browser width, with text below explaining to resize the window.

⚠️

Common Pitfalls

Common mistakes when creating responsive images include:

Not setting max-width: 100%, causing images to overflow their containers on small screens.
Setting fixed width and height in pixels, which prevents scaling.
Forgetting to include the alt attribute for accessibility.
Not using the <picture> element or srcset attribute to serve appropriate image sizes, leading to slow loading on mobile devices.

html

<!-- Wrong: fixed size causes overflow -->
<img src="image.jpg" width="800" height="600" alt="Fixed size image">

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

📊

Quick Reference

Tips for responsive images:

Use max-width: 100% and height: auto in CSS.
Use the <picture> element with <source> for different screen sizes.
Always include alt text for accessibility.
Test images on various screen sizes and devices.

✅

Key Takeaways

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

The

Avoid fixed pixel sizes on images to prevent overflow on small screens.

Always include alt text for accessibility and SEO.

Test your responsive images on multiple devices and screen sizes.