如何在调整窗口大小时裁剪图像并保持其中心位置

Question

我有一个图像标签（包含一个.png），它跨越了我的视口宽度。当我调整它的大小时，我希望它被裁剪，将 png 的中心固定在页面的中心，但它相对于其左上角进行裁剪。图像也在内部

该图像是引导轮播的一部分，它被定位为网站的促销横幅。我尝试将图像用作背景图像，它完全按照我的意愿工作，但我更喜欢为此使用图像标签（可用性和其他控件首选项）。我也在CSS上尝试了对象位置属性，但它不起作用（我将其应用于图像）

<div class="image-container">
    <img src="img/..." class="banner-image" alt="Banner image">
</div>

.CSS

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

这是一张小图片，显示了我正在经历的情况和期望的结果：（我不能将其作为图像发布，但我上传到了imgur）

https://i.stack.imgur.com/1IXrP.jpg

Answer 1

Flexbox 可以做到这一点。

在本例中，我允许overflow并使图像略微透明，以便您可以看到图像的行为。

.image-container {
  height: 460px;
  //overflow: hidden;
  display: flex;
  width: 60vw;
  margin: 1em auto;
  border: 1px solid red;
  justify-content: center;
}
.banner-image {
  opacity: .5
}

<div class="image-container">
  <img src="http://www.fillmurray.com/620/460" class="banner-image" alt="Banner image">
</div>

Answer 2

要使图像适合div，您可以使用如下所示的 css：

.HTML

<div class="image-container">
</div>

.CSS

.image-container {
    background: url("../banner.jpg") no-repeat center;
    background-size: cover;
    height: 460px;
    width: 100%;
}

小提琴：https://jsfiddle.net/01x82wz3/

参考： https://developer.mozilla.org/de/docs/Web/CSS/background-size