Yes.
OPTION #1:
Use the <picture> element with different sized images for various devices -- large, medium, small, extra-small.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
OPTION #2:
Use a CSS width property of 100%. The downside is that all devices receive the same amount of bandwidth and small images will appear distorted on larger devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Image Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {width: 95%; margin: 0 auto;}
img {border:8px solid #EEE; box-shadow: 3px 1px 4px #666}
.fluid {width: 100%;
</style>
</head>
<body>
<h2>OPTION #1</h2>
<p>Picture Element & SRCSET</p>
<picture>
<source srcset="https://dummyimage.com/1100x100.jpg" media="(min-width: 1100px)">
<source srcset="https://dummyimage.com/900x100.jpg" media="(min-width: 900px)">
<source srcset="https://dummyimage.com/500x100.jpg" media="(min-width: 500px)">
<img src="https://dummyimage.com/300x100.jpg" alt="placholder">
</picture>
<h2>OPTION #2</h2>
<p>Single Fluid Image</p>
<img class="fluid" src="https://dummyimage.com/500x100" alt="placeholder">
</body>
</html>
Nancy O'Shea— Product User, Community Expert & Moderator
2
Replies
AdChoices