htmlcssimageresponsive-imagespicturefill

Picture element - Where to apply responsive img class

Let's say I've got the following picture element:

<picture>
    <source srcset="images/something-1100@1x.jpg 1x, images/something-1100@2x.jpg 2x"
                    media="(min-width: 840px)">
    <source srcset="images/something-839@1x.jpg 1x, images/something-839@2x.jpg 2x"
                    media="(min-width: 480px)">
    <img src="images/something-479.jpg"
                 srcset="images/something-479@1x.jpg 1x, images/something-479@2x.jpg 2x" alt="Something">
</picture>

I see that when there are intermidiate screen widths that the images are not responsive(eg. they overflow their parent element) which is only natural.

The immediate thing to do would be to apply the following class:

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

So I ask where exactly does a class like this has to be applied? On a <source>? On the <img>? On the <picture>? Everywhere?

Solution

  • You have to apply the class to the <img> tag.