Responsive images in twig

Hi,

I am trying to use some twig logic while setting a hero image. However for some reason i can't get it to work.

I tried using the derivatives option, which i thought would make most sense, but didn't get it to work. My last attempt was using the size option in twig, but also here I don't get it to work.

I currently have:

        {% set hero = page.media[page.header.header_image].sizes('(max-width:26em) 100vw, 50vw') %}

        <header style="background: #000 url('{{ hero.url }}');
            background-repeat: no-repeat;
            width: 100%;
            height: 90vh;
            transition: height 999999s;
            background-size: cover;
            background-position: center;
            position: static;" data-0="background-position:0px 0px;" data-500="background-position:0px -300px;">

I am using inline css here since thats the way the use can change the image within grav.

As far as i understand the documentation this should work one way or the other, right?

Very thankful for any pointers in the right direction.

Thanks,

Laurens

This works for me, user can add an image, first image will be displayed.

<div class="hero">
    {{ page.media.images|first.derivatives(320, 2000, 200).sizes('(max-width:26em) 100vw, 100vw').html() }}
</div>