html - 根据父 div 裁剪背景图像

Question

我有一个带有左右边距的父 div 和另一个带有背景图像但没有边距的 div。

我有背景尺寸作为封面，但显示的图像的左右部分被切断，但仍然尊重边距。

橙色是背景图像 div 并且具有数字 1 到 6，但灰色边距部分覆盖了图像并阻挡了 1 和 6，但我想将图像填充到橙色部分，尊重灰色边距并将所有 1 到 6 安装在橙色部分。

<div style="margin-left: 10vw; margin-right: 10vw;">
    <div class="image"></div>
</div>

.image {
    background-image: url("orange.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100px;
}

编辑：上传新图片

标签： htmlcss

Answer 1

您只需要更改cover为contain.

您的代码将变为：

<div style="margin-left: 10vw; margin-right: 10vw;">
    <div class="image"></div>
</div>

.image {
    background-image: url("orange.jpg");
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 100px;
}

查看窗口的纵横比导致图像的高度伸展到足以填充橙色框的高度，并且保持纵横比将图像的侧面推离橙色区域并进入灰色区域。

如果你让你的窗口不那么高，它看起来就像你想要的那样，但你不想依赖于查看器的窗口纵横比。

相反，使用“包含”将限制图像大小，使图像适合橙色区域。