如何避免`<img>`元素撑大设置了`width: fit-content`的父容器

请查看下方代码片段：

.parent {
  background-color: #a7dbff;
  width: fit-content;
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(https://i.sstatic.net/qV078.jpg);
  background-size: contain;
}

<div class="parent">
  <h3>Some title</h3>
  <div class="image"></div>
  <div>Some more content here</div>
</div>

<div class="parent">
  <h3>Some title</h3>
  <img class="image" src="https://i.sstatic.net/qV078.jpg">
  <div>Some more content here</div>
</div>

我想要让图片尺寸适配父容器内最宽的元素。
第一个示例中图片通过background-image设置，运行正常，设置width: 100%后该元素会被调整为父容器的宽度。
但第二个示例中使用的是<img>元素，这种情况下图片会比原本的父容器更宽，导致父容器也随之被撑大。
补充背景：我希望使用<picture>元素让用户代理（UA）自动下载正确格式的图片，但不幸的是<picture>元素也存在同样的问题。看来向父容器中添加<img>会导致父容器的fit-content宽度变大。
请问是什么原因导致了这个行为，有没有CSS层面的修复方案？
注意：同类问题的现有解决方案不适用于本场景，因为我使用的是<img>而非<div>元素。

• 普通无内容的块级元素（比如第一个示例里的div型.image）没有固有宽度，父容器设置fit-content时，宽度会优先由内部的文本类内容（这里的h3和底部文字）的最大宽度决定，div设置width:100%只会继承父容器已经计算好的宽度，不会反过来撑开父级。
• 而<img>、<picture>都属于替换元素，自带原始图片的固有尺寸，浏览器计算fit-content父容器宽度时会把图片的原始宽度纳入参考，相当于图片宽度也参与了父容器宽度的计算，最终就会出现图片把父容器撑宽的问题。

只需要给图片外层套一个额外的容器，给这个容器设置特殊的宽度规则即可，不会影响原有布局逻辑，也兼容<picture>元素：

/* 新增图片外层容器样式 */
.img-wrapper {
  width: 0;
  min-width: 100%;
}

/* 给img类型的.image补充object-fit属性，对应background-size:contain的效果 */
.image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

修改后的HTML示例：

<div class="parent">
  <h3>Some title</h3>
  <div class="image" style="background-image: url(https://i.sstatic.net/qV078.jpg);background-size: contain;"></div>
  <div>Some more content here</div>
</div>

<div class="parent">
  <h3>Some title</h3>
  <!-- 套上外层容器 -->
  <div class="img-wrapper">
    <img class="image" src="https://i.sstatic.net/qV078.jpg" alt="示例图">
  </div>
  <div>Some more content here</div>
</div>

<!-- picture元素同理 -->
<div class="parent">
  <h3>Some title</h3>
  <div class="img-wrapper">
    <picture>
      <source srcset="example.avif" type="image/avif">
      <source srcset="example.webp" type="image/webp">
      <img class="image" src="https://i.sstatic.net/qV078.jpg" alt="示例图">
    </picture>
  </div>
  <div>Some more content here</div>
</div>

方案原理 #

外层的.img-wrapper设置width:0时，浏览器计算父容器fit-content宽度会直接忽略这个容器的尺寸，父容器宽度完全由内部文本内容的最大宽度决定；同时min-width:100%又让这个容器能占满父容器已经计算完成的全部可用宽度，内部的图片设置width:100%就能正常适配父容器宽度，不会出现反向撑开的问题。

内容的提问来源于stack exchange，提问作者Jespertheend