如何防止 `<img>` 使具有 `width: fit-content` 的父项变大

Question

请看下面的代码片段：

.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.stack.imgur.com/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.stack.imgur.com/qV078.jpg">
  <div>Some more content here</div>
</div>

我正在尝试使图像成为父元素中最大元素的大小。

在第一个示例中，图像是使用 background-image 设置的，效果很好。使用 width: 100%，元素的大小调整为父元素的宽度。

但在第二个示例中，图像是 <img> 元素。在这种情况下，图像变得比父级大，导致父级随之增长。

一些上下文：我想使用 <picture> 元素，以便 ua 自动下载正确格式的图像。不幸的是， <picture> 元素似乎也有同样的行为。似乎向父级添加 <img> 会导致父级的 fit-content 值增长。

是什么导致了这种行为，有什么方法可以用 css 解决这个问题吗？

请注意，这与类似，但那里的解决方案不适用于此处，因为我使用的是 <img> 而不是 <div>

Answer 1

我向 .parent 添加了两个属性。我不确定 white-space 在各种尺寸上的效果如何，但对于您的示例来说没问题。片段结果有细微差别；我没仔细看。

.parent {
  background-color: #a7dbff;
  width: fit-content;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  
  max-inline-size: min-content;
  white-space: nowrap;
}

.image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(https://i.stack.imgur.com/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.stack.imgur.com/qV078.jpg">
  <div>Some more content here</div>
</div>

Answer 2

这是否解决了您的问题？

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

.image {
  height:100%;
  width:100%;
  object-fit: cover;
}

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

您还可以为图像指定高度，但是您需要为 img 创建另一个父级 div 并给 div 一个 height 属性

如何防止 `<img>` 使具有 `width: fit-content` 的父项变大

How do I prevent an `<img>` from making a parent with `width: fit-content` bigger

html

css

image

width