我应该为 IMG、图片还是两者设置样式？

Question

我正在使用 <picture> 标签（以及 <img> 和 <source> 标签）来显示 WebP 图像，并显示 png/jpg 版本，如果浏览器不支持 WebP。

到目前为止，我只能在 <picture> 内设置 <img> 标签的样式，而忽略 <picture> 本身的样式。然而，我只是运行遇到了一个奇怪的案例。

我有一个带有 <picture> 和文本 <div> 的 flexbox，其中 <div> 有 max-width: 60%; 而 <img> 有 max-width: 40%;.浏览器将 <img> 限制为该宽度...但不包括 <picture>，它莫名其妙地增长到 600px。

现在，我可以在图片上放一个 max-width 来解决这个问题，但我正在努力理解：

A) <picture> 标签什么时候决定变得比它的子 <img> 标签大（当没有使用大小不同的 <source> 标签时）？

B) 最好的做法是在 <img> 和 <picture> 上复制样式，还是我做错了什么？

Answer 1

你的html是这样的吗？

<div>

   <picture>
      <img />
   </picture>

   <div>
      some text
   </div>

</div>

如果是这种情况，您可能需要将 max-width 设置为“图片”而不是“img”。

我应该为 IMG、图片还是两者设置样式？

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

css

image