LAST UPDATED: AUGUST 5, 2021
How to create an responsive image with CSS?
In today's world, devices are of different sizes. From small mobiles to large computers. So when we add the image to a web page, it should adjust itself according to the size of the device.
This type of image is called a responsive image. We can add responsive images to an HTML program using CSS properties.
CSS properties for responsive image
The first way to create a responsive image is by adding the height of the image and width to 100%. We can also add the @media query to adjust the width of the image on different size devices.
Example: Create a responsive image with height and width property
In this program, we will add a <image> with class="responsive" . Further, we will add height and width="100%" to the responsive class to make the image responsive.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 100%;
height: 200px;
border: 1px solid blue;
}
</style>
</head>
<body>
<h1>Responsive Images Example</h1>
<h2>Resize the window to see responsive image scale up and down</h2>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1626954731-101156.png">
</body>
</html>
Output
For large screen
For small screen
Example: Add a responsive image using media query
We can use @media query to adjust the size of the image at different widths of the screen. use the @media with max-width or min-width property.
Conclusion
We can create responsive images by adding CSS property to the image. Either we can set width:100 or add the @media query rule to resize the image accordingly. We have illustrated it with examples.
