Responsive Images
š„ļø Try It Yourself
[Here are a few practice exercises you can try in the live editor to solidify your understanding of responsive images:
Exercise 1: Simple Image Size Adjustment
- Create a simple HTML file (e.g.,
index.html) with the following structure:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="image1.jpg" alt="A beautiful landscape">
</body>
</html>
- Create a CSS file (e.g.,
style.css) with the following content:
img {
width: 100%; /* Make the image fill the container */
height: auto; /* Maintain aspect ratio */
}
- Open
index.htmlin your browser. You should see the image scaled to fit the width of the browser window. Resize the browser window to see the image scale proportionally.
Exercise 2: Image Size Based on Screen Size
- Create a CSS file (e.g.,
style.css) with the following content:
img {
max-width: 100%;
height: auto;
}
- Create a HTML file (e.g.,
index.html) with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="image2.jpg" alt="Another image">
</body>
</html>
- Open
index.htmlin your browser. Resize the browser window to see the image scale appropriately. Notice how the image will scale down to fit the screen width.
Exercise 3: Using srcset for Different Devices
- Create a CSS file (e.g.,
style.css) with the following content:
img {
width: 100%;
height: auto;
}
- Create a HTML file (e.g.,
index.html) with the following content:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="image3.jpg" alt="A product image">
</body>
</html>
- Open
index.htmlin your browser. Resize the browser window to see the image scale appropriately. Notice how the image will scale down to fit the screen width. The browser will automatically use thesrcsetattribute to load different image sizes based on the device's screen resolution.
š” Tip: The srcset attribute in the <img> tag allows you to specify multiple image sources, and the browser will choose the most appropriate image based on the device's screen resolution and pixel density. This is crucial for delivering optimal viewing experiences across a range of devices.
š„ļø Try It Yourself
[Here are a few interesting practice exercises the student can try in the live editor:
- Experiment with different
max-widthvalues: Change themax-widthproperty in the CSS to see how it affects the image's scaling. - Add a
loading="lazy"attribute: This attribute can improve initial page load times by lazy-loading images. (This is a more advanced topic, but it's a good demonstration of responsive image techniques.) - Create a simple responsive layout: Use CSS to create a basic layout with multiple images, demonstrating how responsive images can be integrated into a larger design. You can use media queries to adjust the layout for different screen sizes.]