CODEWITHSUNDEEP
htmlcssimageresponsive-imagespicturefill
Kostas Dimakis
Kostas Dimakis

Reputation: 1153

Picture element - Where to apply responsive img class

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

<picture>
    <source srcset="images/[email protected] 1x, images/[email protected] 2x"
                    media="(min-width: 840px)">
    <source srcset="images/[email protected] 1x, images/[email protected] 2x"
                    media="(min-width: 480px)">
    <img src="images/something-479.jpg"
                 srcset="images/[email protected] 1x, images/[email protected] 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?

Upvotes: 0

Views: 1176

Answers (1)

marcobiedermann
marcobiedermann

Reputation: 4915

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

Upvotes: 2

Related Questions