Search code examples
cssimageattributeswidth

How to force `img` tag to respect parent `picture` parameters?

Is there any way, that img element (set to width:100%) was following parent <picture> element's width attribute? Here is an example to demonstrate, that it only follows "style" property, and not attribute:

First:
<picture width="15" style="display:inline-block;">
     <img src="https://i.imgur.com/FqUFgYd.png" style="width: 100%;">
</picture>

Second:
<picture width="15" style="display:inline-block; width:15px;">
     <img src="https://i.imgur.com/FqUFgYd.png" style="width: 100%;">
</picture>

Solution

  • It's because <picture> element supports only global attributes, so width="15" isn't supported by the <picture> element. It can be done only by defining <picture> element in CSS, adding ID/class or by adding **style=""** into element.

    Second:
<picture style="display:inline-block; width:15px;">
     <img src="https://i.imgur.com/FqUFgYd.png" style="width: 100%;">
</picture>