如何防止""<img>使具有"宽度：适合内容"的父项变大

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添加了两个属性。我不确定白色空间将如何在各种尺寸上工作，但对于你的例子来说是可以的。在snippet-result中有一个细微的差别;我没有仔细研究过。

.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属性