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

Posted 2023-02-25

【中文标题】CSS Center 在最小宽度下裁剪图像

【英文标题】：CSS Center crop image under min width

【发布时间】：2021-09-08 16:14:15

【问题描述】：

我正在尝试在某个断点上实现全宽/全高的页面横幅，并且在该断点下方开始缩小宽度以保持其高度。我使用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 元素而不是将图像设置为横幅容器的背景，因为我希望容器采用图像的高度。如果我可以使用背景图片来做到这一点，那可能就是要走的路

【问题讨论】：

您应该提供更多信息/您的结果图片也会很棒。

developer.mozilla.org/en-US/docs/Web/CSS/object-fit

@AlvaroMenéndez 这似乎没有任何效果

【参考方案1】：

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

.banner-container 
  width: 50%

.background-image 
  width: 100%;
  height: auto;

【参考方案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%)

【讨论】：

这非常接近，但是它会水平拉伸图像，因为它采用最小高度，而不是图像的高度超过最小宽度时