Responsive images in CSS - Mini Project: Build & Apply

Responsive Images with CSS

📖 Scenario: You are building a simple webpage that shows a photo. You want the photo to look good on all screen sizes, from phones to large desktop monitors.

🎯 Goal: Create a responsive image that adjusts its size smoothly to fit different screen widths without distortion or overflow.

📋 What You'll Learn

Use an HTML <img> tag with a fixed image source.

Write CSS to make the image scale responsively within its container.

Ensure the image keeps its aspect ratio and does not overflow the page width.

Use modern CSS properties only (no deprecated or fixed pixel widths).

💡 Why This Matters

🌍 Real World

Responsive images are essential for websites to look good on phones, tablets, and desktops without loading huge images or breaking layouts.

💼 Career

Web developers must know how to make images responsive to improve user experience and website performance across devices.

1

Create the HTML image element

Write an HTML <img> tag with src="photo.jpg" and alt="A beautiful scenery" inside a <div> with class image-container.

CSS

Need a hint?

Use the <img> tag with the exact src and alt attributes inside a <div> with class image-container.

2

Add CSS container width

Create a CSS rule for .image-container that sets its maximum width to 600px and width to 90% so it shrinks on smaller screens.

CSS

  


/* Add CSS for .image-container here */

Need a hint?

Use max-width: 600px; and width: 90%; inside the .image-container CSS rule.

3

Make the image responsive

Add a CSS rule for .image-container img that sets width: 100% and height: auto to make the image scale with the container while keeping its aspect ratio.

CSS

  


.image-container {
  max-width: 600px;
  width: 90%;
}

/* Add CSS for .image-container img here */

Need a hint?

Set width: 100% and height: auto for the image inside .image-container img CSS rule.

4

Add responsive behavior for small screens

Add a CSS media query for screens with max-width 400px that sets .image-container width to 100% so the image uses full width on very small devices.

CSS

  


.image-container {
  max-width: 600px;
  width: 90%;
}

.image-container img {
  width: 100%;
  height: auto;
}

/* Add media query for small screens here */

Need a hint?

Use @media (max-width: 400px) and inside it set .image-container { width: 100%; }.