How to make images responsive ?
Last Updated :
24 Jul, 2024
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201191443/logo.png"
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=
"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>
</head>
<body>
<img class=".img-fluid" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220201191443/logo-200x32.png"
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:
Similar Reads
How to make iframe Responsive in Bootstrap ?
A responsive iframe in Bootstrap refers to embedding an iframe within a container that adjusts its size and aspect ratio based on the screen size, ensuring proper display and usability across various devices and viewports. ApproachIn this approach, we are using Bootstrap's Embed Responsive Classes.
2 min read
Bootstrap 5 Images Responsive images
Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.Responsive
1 min read
Bulma Responsive images with ratios
Bulma is a free, open-source CSS framework based on Flexbox to build beautiful responsive websites. In this article, we'll see Bulma responsive images with ratios. We can use images using the Bulma framework in our web application with specific sizes as the user wants but what if the user doesn't kn
4 min read
How to make a HTML div responsive using CSS ?
The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem
2 min read
Primer CSS Responsive Margins
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
How to Resize an Image in HTML?
Images are a vital part of any webpage, enhancing the visual appeal and improving user engagement. However, displaying images at the correct size is essential for a professional look and optimal page performance. Resizing an image in HTML ensures that it fits within your webpage's design while maint
2 min read
How to import image in Next.js ?
Next.js is a full-stack React-based framework. Unlike a traditional react app, which loads and renders the entire application on the client, Next.js allows the first-page load to be rendered by the server, which is great for SEO and performance. Some of the key features of Next.js are:Â Server-side
4 min read
HTML Responsive full page image using CSS
Responsive Web design (RWD), is a design strategy developed to cope with the amazing popularity of mobile devices for viewing the Web. Responsive images are an important component of responsive Web design (RWD), Responsive web design is a new approach to website design that ensures users have a good
2 min read
How to Create Responsive Modal Images using CSS & JavaScript?
Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time. PreviewApproachFirst, create a basic HTML layout for your image gallery and modal pop-ups. Each ima
4 min read
How to create Responsive iFrames using CSS ?
An iframe, or inline frame, is an HTML element used to embed another document or webpage within the current document. Responsive iframes can be achieved by defining the aspect ratio, which refers to the proportional relationship between the width and height of an element. To maintain the aspect rati
4 min read