CSS居中裁剪图像小于最小宽度

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%)