I'm a bit confused about how the picture tag works in relation to an img tag when its parent has 'display: flex' applied. When I set width: 50% on the img tag, it doesn't make the image 50% of the div but rather 50% of the picture element. However, if I set width: 50% on the picture and width: 100% on the img, it behaves as expected. I'm wondering why I need to add styles to the picture element in order to make the img 50% of the div. I always thought that the picture tag was just an invisible wrapper for keeping image sources, not something that would affect layout like a div. Can you help explain this behavior?
<div style="display: flex;">
<picture style="width: 50%">
<source srcset="img/cmn/logo.webp" type="image/webp">
<img src="image.png" alt="img" style="width: 100%;">
</picture>
</div>