Html 图像不'；t在使用时不能装入容器<；img>；但对背景图像没有影响

我试图让一个图像成为一个完整大小的div/容器的背景，而不管div本身有多少内容

当我尝试时：

<div class = 'container-fluid'>
   <img src="image.jpeg" style="object-fit: cover;" />
</div>

图像具有全高，但图像延伸超过屏幕宽度（因为分辨率相当高）。 但是，当我添加图像作为背景时，它似乎很好，挤压宽度以匹配页面，但允许全高，但由于背景的大小由内部内容定义，我尝试：

<div class = 'container-fluid' style="background-image: url(image.jpeg);">
 <img src="image.jpg" style="visibility: hidden; object-fit:cover;" />
</div>

虽然这确实给出了预期的结果（这也是令人困惑的，因为对象匹配的行为应该与背景大小类似），但它在图像右侧添加了一个带有空白区域的水平滚动条，因为我猜当它被隐藏时，它仍然在页面上。 我如何才能消除页面上多余的空白，或者有没有更好的方法，让图像压扁以匹配屏幕宽度，但不管div的内容如何，都具有全高？

---

提前非常感谢

我不太清楚你想用这个实现什么，但我会尝试解释你提到的事情

在第一个示例中，图像是不受约束的（没有指定的宽度或高度），因此它占用了图像所具有的原始大小。容器只是包裹着它，它不包含它。但是，当您将图像添加为背景图像时，它只是容器的背景，因此它与容器的大小相同

在第二个示例中，您再次看到了相同的图像，它占据了原始大小（比屏幕宽），但当它被隐藏时，它仍然存在。MDN文档说明

可见性

在不更改布局的情况下显示或隐藏元素。这就是为什么滚动条上有一个空白区域，因为图像仍然是布局的一部分

object-fit

类似于

background size

，但可能让您困惑的是，您可能认为

object-fit

会根据容器的大小调整图像大小。而实际上，它是根据图像本身的大小来工作的。例如，如果将图像宽度和高度设置为200px（或小于图像分辨率的某个值），则

object fit

将按预期工作

对于解决方案，正如我所说，我不知道你想要实现什么，但我认为这可能会有所帮助

一个显而易见的解决方案是将容器设置为您想要的大小，并将图像设置为背景。使用此属性，您还可以使用

背景位置

属性

要使用

img

标记，您可以以第一个示例为例，添加

position:relative到容器元素并设置
宽度：100%；高度：图像元素的100%

如果您希望图像是sceen的宽度，您可以使用这两种方法中的任何一种，并将容器的大小或图像大小设置为
width:100vw；高度：100vh
vw
和
vh
是视口宽度和高度。您可以在上的MDN文档中了解更多信息。
我没有将其包含在代码中，但我的头脑中有一个引导CDN我的头脑中有一个引导CDN，如果您的代码中有这个，我更愿意。你头脑中的CDN可能会导致健康问题：非常感谢你花时间写下如此详细的回复。我所寻找的基本上都是使用大众和vh的值来解决的，再次感谢：）