css - 调整窗口大小时如何裁剪图像并保持其居中

Question

我有一个横跨视口(viewport)宽度的图像标签(包含 .png)。当我调整它的大小时，我希望它被裁剪为 png 的中心固定在页面的中心，但是它相对于它的左上角裁剪。图片也在a里面

图像是引导轮播的一部分，应该是网站的宣传横幅。我已经尝试使用该图像作为背景图像并且它完全按照我想要的方式工作，但我更愿意为此使用图像标签(辅助功能和其他控制首选项)。我也试过 CSS 上的 object-position 属性，但它没有用(我将它应用到图像上)

<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://imgur.com/a/TrgAo0w

Answer 1

Flexbox 可以做到这一点。

在这种情况下，我允许溢出并使图像稍微透明，以便您可以看到图像的行为。

.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>