Responsive Web Design - Images
Whatever the screen size, a responsive image adapts to fit it automatically.
Using The width Property
One way to get a responsive image is a percentage width with height set to auto. As you resize the browser, the image then scales up and down with it.
Note: This approach lets the image grow beyond its original size, so in many cases max-width is the better choice.
Example
Prompt
Create a page with an image that uses
width: 100% and height: auto to make it responsive. Use any placeholder image URL like "img_chania.jpg".
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - width Property</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect:</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Using The max-width Property
A max-width of 100% lets the image shrink when necessary while stopping it from ever exceeding its original size.
Example
Prompt
Create a page with an image that uses
max-width: 100% and height: auto so the image scales down but never scales up beyond its original size.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - max-width Property</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect. The image will never scale up to be larger than its original size.</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Add an Image to The Example Web Page
Example
Prompt
Create a simple responsive web page layout with a heading, paragraph text, and an image. The image should use
width: 100% and height: auto to be responsive within the page content.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image in Web Page</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Web Page with Image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
<img src="img_chania.jpg" alt="Chania">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</body>
</html>
Background Images
Resizing and scaling can affect background images as well, and you have three different methods to choose from:
Using background-size: contain
Here the image scales to try to fit the content area, while its aspect ratio (the proportional relationship between width and height) stays intact.
Prompt
Create a page with a div that has a background image using
background-size: contain, background-repeat: no-repeat, a width of 100%, a height of 400px, and a 1px solid black border.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Contain</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Using background-size: 100% 100%
Here the image stretches until the entire content area is covered.
Prompt
Create a page with a div that has a background image using
background-size: 100% 100%, a width of 100%, a height of 400px, and a 1px solid black border.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Stretch</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: 100% 100%</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Using background-size: cover
Scaling here continues until the entire content area is covered. The aspect ratio is kept, so part of the image may be clipped.
Prompt
Create a page with a div that has a background image using
background-size: cover, a width of 100%, a height of 400px, and a 1px solid black border.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Cover</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: cover</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Different Images for Different Devices
What suits a big computer screen may be useless on a small device, and a large image adds load. Media queries cut that load by showing different images on different devices.
Example
Prompt
Create a page that uses media queries to show different background images depending on screen width. For widths smaller than 400px use one small image, and for 400px and larger use a different larger image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Images for Different Devices</title>
<style>
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
</style>
</head>
<body>
<h2>Different Images for Different Devices</h2>
<p>Resize the browser window to see the background image change at 400px.</p>
</body>
</html>
The HTML <picture> Element
For responsive designs, the HTML <picture> element offers more flexibility in specifying image sources.
Rather than scaling a single image up or down with the viewport width, you provide several images, each designed for a different screen size. As with <video> and <audio>, you list different sources, and the browser uses the first one that fits.
Each source defines its image through the required srcset attribute and can accept media queries through the optional media attribute. For browsers without <picture> support, add an <img> element as a fallback.
Example
Prompt
Create a page using the HTML
<picture> element with two <source> elements and an <img> fallback. One source should use a media attribute for max-width: 400px to serve a smaller image, and the other serves a larger image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The HTML picture Element</title>
</head>
<body>
<h2>The HTML picture Element</h2>
<p>Resize the browser window to load different images.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
Responsive Image Gallery
Flexbox and media queries can work together to produce a responsive image gallery.
Example
Prompt
Create a responsive image gallery using media queries and flexbox. Show four images in a row on large screens, two per row on medium screens, and one per row on small screens. Style each image to fill its container width.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
width: 100%;
padding: 4px;
}
/* One column (for small screens) */
.gallery img {
width: 100%;
}
/* Two columns (for medium screens) */
@media only screen and (min-width: 600px) {
.gallery img {
width: 50%;
}
}
/* Four columns (for large screens) */
@media only screen and (min-width: 992px) {
.gallery img {
width: 25%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<img src="img_5terre.jpg" alt="Cinque Terre">
<img src="img_forest.jpg" alt="Forest">
<img src="img_lights.jpg" alt="Northern Lights">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</body>
</html>