将图像拉伸到视口保持纵横比，而不使用对象拟合

Question

我需要在具有相同尺寸的图像上放置一个覆盖层。为此，我使用绝对定位的同级

div

。

我不能使用

object-fit: contain

，因为它不会减少

img

元素本身的尺寸，导致覆盖层更大。基本上，图像的尺寸驱动整个设置。

当前设置如下。

.image-portrait

在视口宽高比>图像宽高比时有效，在其他情况下

.image-landscape

有效。

HTML：

<div class="relative">
 <img src="./image.jpg" class="image-portrait"/>
 <div class="overlay">This is an overlay</div>
</div>

CSS：

.relative {
 position: relative;
}

.image-portrait {
 height: 100vh;
 max-width: 100vw;
}

.image-landscape {
 width: 100vw;
 max-height: 100vh;
}

.overlay {
 position: absolute;
 top: 0;
 height: 100%;
 width: 100%;
 background-color: rgb(0,0,0,0.5);
}

是否有一种仅 CSS 的方法可以在不使用 JS 的情况下执行此操作？

Answer 1

使用问题中给出的当前代码，您应该能够通过将

width: fit-content

添加到

.relative

类样式来修复它。这样，您的

.relative

父容器将与其内容的宽度相匹配。因此，在这种情况下，由于

<img>

正在驱动内部内容的宽度，因此容器将匹配其宽度，而覆盖层将仅匹配父容器的宽度。

在此处查看有关

fit-content

值的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content。