Horje
How to show Different Images Depending on Browser Width | HTML Responsive Code
How to show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below changes depending on the width:


Full Example of Different Images Depending on Browser Width

Resize the browser width and the image will change at 600px and 1500px.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

Output should be:

Full Example of Different Images Depending on Browser Width



Read Full::
HTML Responsive Code
Category:
HTML Code
Sub Category:
HTML Responsive Code
Uploaded:
9 months ago
Uploaded by:
Admin
Views:
3

Related Articles
What is HTML Responsive HTML Responsive Code
How to Setting The Viewport HTML Responsive Code
How to create HTML Responsive Images HTML Responsive Code
How to create HTML Responsive Images Using the max-width Property HTML Responsive Code
How to show Different Images Depending on Browser Width HTML Responsive Code
How to create HTML Responsive Text Size HTML Responsive Code
How to create Media Queries HTML Responsive Code
How to create Responsive Web Page - Full Example HTML Responsive Code
How to create HTML Responsive Web Design - Frameworks HTML Responsive Code

Single Articles
Full Example of Different Images Depending on Browser Width

Share on: