Responsive Images using Bootstrap
If you’re using the Bootstrap framework in your project, you can use the
.img-fluid class so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
For more about responsive images in Bootstrap, see https://getbootstrap.com/docs/4.1/content/images/#responsive-images.
Responsive Images using Foundation
Using Foundation? You’re already on your way to success! Unlike Bootstrap, Foundation provides support for truly responsive images. It uses the Interchange library to dynamically load responsive content that’s appropriate for the user’s device.
<img data-interchange="[assets/img/interchange/small.jpg, small], [assets/img/interchange/medium.jpg, medium], [assets/img/interchange/large.jpg, large]">
In the example above, we have three different sizes of image: one for small screens, one for medium, and one for large. Use the below format to set up a responsive image. The image will change automatically as the browser resizes. Learn more about Interchange here: https://foundation.zurb.com/sites/docs/interchange.html
- Use Cases and Requirements for Standardizing Responsive Images by the W3C Working Group
- Responsive Images by Google — a free course provided by Udacity
- Applying srcset: choosing the right sizes for responsive images at different breakpoints by Paolo Mioni
- Building a responsive image by Nils Binder