Should I Style the IMG, the Picture, or Both?-CodePudding

I'm using a <picture> tag (along with an <img> and <source> tag) to show WebP images with a fallback of showing the png/jpg version if the browser doesn't support WebP.

Up until now I've been able to just style the <img> tag inside the <picture>, and ignore styling the <picture> itself. However, I just ran into a weird case.

I have a flexbox with the <picture> and a text <div>, where the <div> has max-width: 60%; and the <img> has max-width: 40%;. The browser limits the <img> to that width ... but not the <picture>, which inexplicably grows to 600px.

Now, I can put a max-width on the picture to fix this, but I'm trying to understand:

A) when does a <picture> tag decide to become bigger than its child <img> tag (when no differently-sized <source> tags are used)?

B) is it best practice to duplicate styles on <img> and <picture>, or am I doing something wrong here?

CodePudding user response：

Is your html like this?

<div>

   <picture>
      <img />
   </picture>

   <div>
      some text
   </div>

</div>

If this is the case, you probably need to set the max-width to the "picture" instead of the "img".