How to make images responsive ?
Last Updated :
12 Feb, 2022
In today’s world, mobile internet usage is growing at a fast pace, so it has become necessary for websites to have responsive designs for devices of different sizes. Websites that can change their appearance dynamically according to the device or the screen in which it is viewed are called responsive websites, i.e. a website with responsive design.
Responsive images are just a part of responsive websites. Images that can change their dimensions, scaling them up or down, according to the browser width, are responsive images. Images should be responsive to improve users’ experience on various devices of different sizes.
How to make an image responsive?
Using CSS: Following are the steps to make an image responsive using CSS.
Include the following HTML meta tag to the head tag of your HTML document. It will set the viewport, adjust the content according to the device’s screen width, and load the page in its initial zoom level in the browser.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Setting up the image property. To make the image responsive, the following CSS property of width can be applied to the image and set as 100% so that it can be scaled up or down according to the browser’s width.
<img src="...." style="width:100%;">
Example 1: The following example demonstrates image responsiveness. In the output below, the website consists of a responsive image, as the image is scaling up and down according to the browser’s width.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
</head>
<body>
<img src=
style="width:100%;">
<h2>Responsive Images</h2>
<p>
Responsive images are just a part of
Responsive websites. Images that can
change their dimensions, scaling them
up or down, according to the browser
width are responsive images. The above
image is responsive as it is adjusting
itself according to the width of the
browser.
</p>
</body>
</html>
|
Output:
Using Bootstrap: Following are the steps to make an image responsive using Bootstrap.
Include the following HTML meta tag to the head tag of your HTML document.
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Include the following stylesheet and scripts of Bootstrap in the head section of the code.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
Using a bootstrap .img-fluid class of Bootstrap to make the image responsive. Also, set the width property value as 100%.
<img class=".img-fluid" src="...." style="width:100%;">
Example 2: In the above example, the image is made responsive using Bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<img class=".img-fluid" src=
style="width:100%;">
<h2>Responsive Images</h2>
<p>
Responsive images are just a part of
Responsive websites. Images that can
change their dimensions, scaling them
up or down, according to the browser
width are responsive images. The above
image is responsive as it is adjusting
itself according to the width of the
browser.
</p>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...