📘 MODULE 5 – Responsive Web Design

🖼️ Lesson 5.4 – Responsive Images

🌐 Making Images Automatically Fit Different Screen Sizes

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Responsive Images

✅ Prevent Image Overflow

✅ Resize Images Automatically

✅ Use Width and Height Properly

✅ Use max-width Property

✅ Create Mobile-Friendly Image Layouts

✅ Build Professional Responsive Websites

📖 Introduction

Images are one of the most important parts of a website.

Examples:

✅ Website Logos

✅ Product Images

✅ College Photos

✅ Portfolio Images

✅ Blog Images

✅ Banners

Imagine adding a large image:

Width = 2000px

On a desktop it may look fine.

But on a mobile phone:

Screen Width = 400px

The image becomes larger than the screen.

Result:

❌ Horizontal Scroll

❌ Broken Layout

❌ Poor User Experience

To solve this problem we use:

🖼️ Responsive Images

🤔 What is a Responsive Image?

A Responsive Image automatically adjusts its size according to the screen size.

Simple Definition

Responsive Images automatically
resize themselves on different devices.

Example

Desktop:

+----------------------+
|                      |
|      IMAGE           |
|                      |
+----------------------+

Mobile:

+------------+
|            |
|   IMAGE    |
|            |
+------------+

Image automatically becomes smaller.

🌟 Why Responsive Images Are Important?

Without Responsive Images:

❌ Images overflow

❌ Layout breaks

❌ Mobile experience becomes poor

❌ Website looks unprofessional

With Responsive Images:

✅ Better Appearance

✅ Mobile Friendly

✅ Faster Loading

✅ Professional Design

🎯 Adding an Image in HTML

Syntax:

<img src="image.jpg">

Example

<img src="college.jpg">

Image appears on webpage.

🌟 Fixed Width Image

Example:

img{

width:1000px;

}

Problem:

On mobile screens:

Screen Width = 400px

Image Width = 1000px

Result:

❌ Image overflows

🎯 Responsive Image Solution

Use:

img{

max-width:100%;

}

Meaning:

Image can never become wider
than its parent container.

Example

img{

max-width:100%;

height:auto;

}

This is the most common responsive image technique.

🌟 Why Use Height Auto?

Example:

img{

height:auto;

}

Meaning:

Maintain original image proportions.

Without height:auto:

Image may become stretched.

Correct Responsive Image Code

img{

max-width:100%;

height:auto;

}

🎯 First Responsive Image Example

HTML

<img src="nature.jpg">

CSS

img{

max-width:100%;

height:auto;

}

Result

Desktop:

Large image.

Mobile:

Smaller image.

Automatically adjusts.

🌟 Width 100%

Another common technique:

img{

width:100%;

}

Meaning:

Image occupies full available width.

Example

img{

width:100%;

height:auto;

}

Difference

width:100%

Always fills container.

max-width:100%

Only shrinks when necessary.

Professional developers usually prefer:

max-width:100%;

🎯 Responsive Image Container

HTML

<div class="container">

<img src="college.jpg">

</div>

CSS

.container{

width:80%;

margin:auto;

}

img{

max-width:100%;

height:auto;

}

Result

Responsive image inside responsive container.

🌟 Responsive Banner Image

HTML

<img src="banner.jpg">

CSS

img{

width:100%;

height:auto;

}

Result

Banner stretches across available width.

🎯 Responsive Profile Image

HTML

<img src="student.jpg">

CSS

img{

width:200px;

height:200px;

border-radius:50%;
}

Creates circular profile image.

Responsive Version

img{

max-width:100%;

height:auto;

border-radius:50%;
}

🌟 Responsive Gallery Layout

HTML

<div class="gallery">

<img src="img1.jpg">

<img src="img2.jpg">

<img src="img3.jpg">

</div>

CSS

.gallery{

display:grid;

grid-template-columns:1fr 1fr 1fr;

gap:20px;

}

.gallery img{

width:100%;

height:auto;

}

Result

Responsive image gallery.

🎯 Using Media Queries with Images

Desktop:

img{

width:500px;

}

Mobile:

@media (max-width:768px)
{

img{

width:100%;

}

}

Result

Desktop:

Large image.

Mobile:

Full width image.

🌟 Complete Example

HTML

<div class="container">

<h1>

Our College

</h1>

<img src="college.jpg">

<p>

Welcome to our college website.

</p>

</div>

CSS

.container{

width:80%;

margin:auto;

}

img{

max-width:100%;

height:auto;

border-radius:10px;

}

Result

Professional responsive image section.

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Responsive Image Example

</h1>

<img src="nature.jpg">

<p>

Learning Responsive Images

</p>

</div>

</body>

</html>

CSS

body{

font-family:Arial;

}

.container{

width:80%;

margin:auto;

}

img{

max-width:100%;

height:auto;

border-radius:10px;

border:2px solid blue;

}

🎯 Expected Output

Responsive image:

✅ Automatically Resizes

✅ Mobile Friendly

✅ No Horizontal Scroll

✅ Professional Design

🏫 Real World Examples

Amazon Product Images

Responsive

Flipkart Product Images

Responsive

College Website Galleries

Responsive

News Website Images

Responsive

Portfolio Website Images

Responsive

⚠️ Common Beginner Mistakes

Mistake 1

Fixed Width Images

Wrong:

img{

width:1200px;

}

Result:

Layout breaks on mobile.

Mistake 2

Missing Height Auto

Wrong:

img{

width:100%;

height:300px;

}

Image becomes stretched.

Correct:

height:auto;

Mistake 3

Very Large Images

Uploading:

8000px × 6000px

Slows website.

Optimize images.

🌟 Best Practices

✅ Use max-width:100%.

✅ Use height:auto.

✅ Compress large images.

✅ Test on mobile devices.

✅ Use responsive containers.

🏆 Mini Project – Responsive College Banner

Create:

College Banner

Containing:

• College Image
• College Name
• Description

Apply:

max-width:100%;

height:auto;

📝 Practical Activity

Create:

Responsive Student Profile

Include:

• Student Photo
• Name
• Branch

Use:

img{

max-width:100%;

height:auto;

}

📋 Assignment

Assignment 5.4

1. What is a Responsive Image?
2. Why are Responsive Images important?
3. What does max-width:100% do?
4. Why is height:auto important?
5. Create a responsive image webpage.
6. Create a responsive image gallery.
7. Explain the difference between width:100% and max-width:100%.

🧠 Quiz

Q1. Which property makes images responsive?

A. width:1000px

B. max-width:100%

C. width:2000px

D. height:500px

✅ Answer: B

Q2. Which property maintains image proportions?

A. width:auto

B. height:auto

C. image:auto

D. resize:auto

✅ Answer: B

Q3. Responsive images help prevent?

A. Overflow

B. Layout Breaks

C. Horizontal Scroll

D. All of These

✅ Answer: D

Q4. Which property is commonly used for responsive images?

A. max-width:100%

B. width:3000px

C. height:1000px

D. image-fit

✅ Answer: A

Q5. Responsive images are important for?

A. Mobile Devices

B. Tablets

C. Desktops

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Responsive Images automatically adapt to different screen sizes.

✅ max-width:100% prevents image overflow.

✅ height:auto maintains image proportions.

✅ Responsive Images improve website usability and appearance.

✅ Every modern website uses responsive images.