Responsive Images — 6 Simple Ways

1 Comment

Join the Conversation

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


Continued Reading

Comments

  1. koma
    at 9:20 pm

    Can you do an example with `figcaption`? would the `picture` elements be before the `figcaption`element and all wrapped inside a `figure`? Thank you

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

All comments are held for moderation. I'll publish all comments that are on topic and not rude. You'll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.

%d bloggers like this: