根据父 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;
}

编辑：上传新图片

Answer 1

好的，伙计。答案很简单。

将包含image 类的div 设为父级。像这样，图像将从左到右全宽。

* {
  margin: 0;
}

.image {
  background-image: url("https://picsum.photos/1920/108");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100px;
}

h1 {
  border: 2px solid red;
}

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

或者保持原样并删除margin-left和margin-right

另一种选择是执行以下操作。

* {
  margin: 0
}

.image {
  background-image: url("https://picsum.photos/1920/1080");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100px;
}

h1 {
  border: 2px solid red;
}

<div class="main-container">
  <div class="image">
    <div class="myContent" style="margin-left: 10vw; margin-right: 10vw;">
      <h1>Hi</h1>
    </div>
  </div>
</div>

如果这不能回答您的问题，请给我留言，我会尽力编辑答案以满足您的要求并尽可能地帮助您。

Answer 2

您只需将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;
}

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

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

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