CSS Responsive Image
Today, most people access the internet on smaller devices (phones and tablets) rather than full-screen devices (laptops, desktops). So, it is very necessary to make a web page responsive to provide a better user interface and device compatibility.
The responsive images are also a part of the responsive web layout. The responsive images are those that adjust themselves automatically according to the device's screen size.
To create a responsive image, we have to set the width property to a percentage, and the height is set to be auto. By applying these two properties to any image, the image will become responsive and automatically adjust itself according to the device's width.
Example : Creating Responsive image in CSS
In this example, we have set the width of the image using CSS width property with a value of 100% and the height of the image using CSS height property with a value auto. These two properties make the image scaled up to be larger than its actual size.
<!DOCTYPE html>
<html>
<head>
<title>CSS Responsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="studyonight.jpg" width="460" height="345">
<p><stronh>When you resize the browser, you will se the effect.</stronh></p>
</body>
</html>
Output:
As we can see in the output, the image is taking the whole available width this is because we have specified the value of the width property to 100%.
Adding Image to a web page using CSS
We can add images anywhere we want within the responsive web pages. The image can also automatically adjust itself according to the device width.
Example : Adding image to a webpage using CSS
In this example, we have added an image within the responsive web page.
<!DOCTYPE html>
<html>
<head>
<title>CSS Responsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%;
}
@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #ff9100;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #f5c92a;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #ff9100;
}
.aside {
background-color: #f5c92a;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #5fcf80;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<h1>Studytonight</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>Tutorials</li>
<li>Tests</li>
<li>Practice Coding</li>
<li>Web Development</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>Studytonight</h1>
<p>In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
<img src="studyonight.jpg" width="460" height="345">
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>Tutorials we offer</h2>
<h3>Academic Subjects</h3>
<h3>Web Development</h3>
<h3>Interview Questions</h3>
</div>
</div>
</div>
<div class="footer">
<p><strong>Resize the browser window to see how the content respond to the resizing.</strong></p>
</div>
</body>
</html>
Output:
Background Images in CSS
We can also make the background image responsive. To make the background image responsive, we have to set the background-size property. The background-size property comes with three values, these are:
| Values |
Description |
| contain |
This value allows the image to adjust itself according to the screen size and try to get fit in the content area. |
| cover |
This value keeps the aspect ratio of the image, and some parts of the image can be clipped if the image size is larger than the content area. |
| 100% |
This value allows the background image to cover the whole content area. |
Example : Adding background-image using CSS
In this example, we have specified the CSS property background-size for an image with a value contain to make the image responsive.
<!DOCTYPE html>
<html>
<head>
<title>CSSResponsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 100%;
height: 400px;
background-image: url('studyonight.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
<p><strong>When you resize the browser you will see the effect.</strong></p>
</body>
</html>
Output:
Using CSS Media Queries
We can set the image of different sizes for different devices, such as the large images, which look good on full-screen devices (laptops and desktops), but these images are useless for small screen devices. So, we use media queries to set the different images on different devices.
Example : Specifying media queries for an image
In this example, we have specified the media queries to make the image responsive.
<!DOCTYPE html>
<html>
<head>
<title>CSS Responsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* For width smaller than 400px: */
body {
background-repeat: no-repeat;
background-image: url('studyonight.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('studyonight.jpg');
}
}
</style>
</head>
<body>
</body>
</html>
Output:
The <picture> Element in CSS
The <picture> HTML element is quite similar to the <video> and <audio> elements. With the help of this element, we can set multiple images within the <picture> element, the image that fits best is being displayed on the screen.
The <picture> element consists of the zero or more <source> element and one <img> element. The browser will consider each <source> element and choose the best among them. If no matches are found or the browser does not support the <picture> element then the image source specified within the <img> element will be displayed.
Note: We can also use the <img> element at the place of <source> element.
Example : Applying <picture> element
In this example, we have specified the opening and closing <picture> element then specified the <source> element. The <source> element consists of two attributes srcset and media. The srcset attribute is used to specify the source of the image and the media attribute is used to specify the media queries for the image.
Conclusion
In this lesson, we have learned how to create a responsive image that adjusts its height and width according to the device's screen size. We have also learned how to
- add responsive background images
- make image responsive using media queries
- add image using <picture> element
