Responsive Images
Responsive images play a key role in responsive websites. These are images that can adjust their size, getting bigger or smaller, based on the width of the browser. By being responsive, images enhance user experience across different devices with varying screen sizes. The following are the techniques to use the responsive images:
2.1 Using width Property
The image can be responsive & scale up & down with the help of CSS width property by setting its value as 100%.
Syntax
<img src="..." style="width:100%;">
Example: In this example, we will use the image width property to occupy 100% of the screen width.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
</head>
<body>
<img class=".img-fluid" src=
"https://media.w3wiki.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
2.2 Using the max-width Property
The max-width property sets the maximum width of an element. It restricts the element’s width from exceeding a certain value. If the content is larger than this maximum width, it wraps to the next line. However, if the content is smaller, the property has no impact. Also, if the content is larger than its original size, it won’t scale up beyond the specified max-width.
Syntax:
<img src="..." style="max-width:100%; height:auto;">
Example: Implementation of the max-width Property for making the Responsive Images
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
</head>
<body>
<img class=".img-fluid"
src=
"https://media.w3wiki.org/wp-content/uploads/20220201191443/logo-200x32.png"
style="max-width:100%;
height:auto;" />
<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
2.3 Responsive Image for different Browser Width
To make images responsive, HTML provides the <picture> element. It gives web developers the flexibility to specify different image resources depending on the size of the browser window
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Responsive Web Design</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">w3wiki</h1>
<h2>HTML picture Tag</h2>
<picture>
<source media="(min-width: 700px)"
srcset=
"https://media.w3wiki.org/wp-content/uploads/20190825000042/geeks-221.png">
<source media="(min-width: 450px)"
srcset=
"https://media.w3wiki.org/wp-content/uploads/20190802021607/geeks14.png">
<img src=
"https://media.w3wiki.org/wp-content/uploads/20190808102629/geeks15.png"
alt="GFG">
</picture>
</body>
</html>
Output
HTML Responsive Web Design
HTML Responsive Web Design is a smart way of designing web pages to look great on any device. It’s all about making HTML elements adjust themselves, like resizing or hiding, based on the device’s screen size. This ensures that no matter if someone’s using a phone, tablet, or computer, the web pages will always look good.
We will show you various examples of how to create an HTML responsive web design that adapts perfectly to different screen sizes.
Contact Us