How to make a <picture> element responsive

Question

I've been struggling some hours trying to understand how the picture tag exactly works. I'm able to load different art directions at specific screen sizes using the <picture> tag in combination with <srcset> but I can't seem to find how I make these responsive.

I gave the <picture> element a class named .header-img. I tried to set media queries for the class and adjust the size of it. But when I try to set a width to .header-img, the width doesn't change.

Maybe an important detail, the <picture>element is inside a grid

 <picture class="header-img">
                <source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
                <source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
                <source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
                <img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
 </picture>

Any help is really really appreciated !

Answer 1

Add this to your CSS:

.header-img img {
    max-width: 100%;
}

And also, you have a container with property width of 70rem.

You should change the property width to max-width like so:

.container {
    max-width: 70rem;
    ...
}