'How to create a Picture in HTML with the correct height

I have a header which I want responsive so that it only loads the relevant sized image. I've been using a Picture tag but it causes a CLS (Cumulative Layout Shift) because it will only size the height for 20px rather than 48px. I've not set any style to affect the picture so can't work out why the Picture reserves only 20px and then when the image loads, it sizes to 48px. When I specify the width, the width works correctly. Any tips?

<html>
    <header>
        <picture>
            <source media="(min-width:624px)" type="image/webp" srcset="/pictures/site.webp"/>
            <source media="(min-width:624px)" type="image/png" srcset="/pictures/site.png"/>
            <source media="(max-width:623px)" type="image/webp" srcset="/pictures/site.webp"/>
            <img src="/pictures/ugweb.png" width="340" height="48" alt="Site" title="Site"/>
        </picture>
    </header>
    <body>
    </body>
</html>
html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions