CSS Center 在最小宽度下裁剪图像

Question

我正在尝试在某个断点上实现全宽/全高的页面横幅，并且在该断点下方开始缩小宽度以保持其高度。我使用min-width 规则在某种程度上实现了这一点，但是在断点下方，它仅从图像的右侧裁剪。由于我通常覆盖居中或左对齐的文本，因此图像的焦点通常位于中心/右侧。是否有任何我不知道的 css 规则定义了裁剪发生在最小宽度以下的位置，而不是它总是从右侧起飞？谢谢

编辑-这里是一些示例代码

<div class="banner-container full-width ">
  <img class="background-image" src="/some-image.png">
  <div class="banner-text full">some text</div>
</div>

这里是相关的css

.banner-container {
  overflow: hidden;
  min-height: 275px;
}
.background-image {
  min-width: 755px;
  height: 100%;
  width: 100%;
}

我使用 img 元素而不是将图像设置为横幅容器的背景，因为我希望容器采用图像的高度。如果我可以使用背景图片来做到这一点，那可能就是要走的路

Answer 1

仅使用“.banner-container”来控制图像容器的宽度。然后对图像本身使用以下内容：

.banner-container {
  width: 50%
}
.background-image {
  width: 100%;
  height: auto;
}

Answer 2

您可以执行以下操作：

.banner-container {
  overflow: hidden;
  min-height: 275px;
  position: relative;
}
.background-image {
  min-width: 755px;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这将使图像水平居中，首先将其向右移动容器的一半（使用left: 50%;，然后将其向左移动自身宽度的一半（transform: translateX(-50%);）。

要使其垂直居中，您还可以添加top: 50%，而不是translateX(-50%)，使用translate(-50%, -50%)