我需要帮助来理解一件事：如果一个图片标签的父标签有' display：flex '，那么它的行为就像一个IMG标签的容器。如果我将width：50%添加到IMG，它不会使IMG成为DIV的50%，而是使IMG成为图片的50%。如果我将宽度：50%添加到图片，将宽度：100%添加到IMG，它将根据我的需要工作。但是为什么我需要为图片添加样式以使IMG占DIV的50%？我以为那张照片只是一个隐形包装，用来保存消息来源。但它的行为类似于DIV.为什么？

<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>

顺晟科技：

从规范

图片元素是一个容器，它为其包含的IMG元素

所以，是的，它的行为类似于图像的DIV，在您的情况下，图片是Flex项目（而不是图像）。

时图片>；元素，它有效地接管其内容的主要元素，内容成为图片元素的依赖项。所以这是如何工作的是意料之中的。

，您可以使用图片元素，而不是其中的单个图像元素。这意味着你必须缩放图片元素，而不是它里面的任何东西。

也就是说，在响应式Web设计中，通常的做法是始终让<picture>元素填充其父容器的整个宽度（宽度：100%；），以使响应性变得更易于处理和更可预测。

权威信息：https：//developer.mozilla.org/en-us/docs/web/html/element/picture.