时间戳

首页 > 解决方案 > CSS Center 在最小宽度下裁剪图像

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

问题描述

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

标签： htmlcss

解决方案

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

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

推荐阅读