调整窗口大小时如何裁剪图像并使其居中答案

【问题标题】：How to crop an image and keep it's center when resizing the window调整窗口大小时如何裁剪图像并使其居中
【发布时间】：2019-06-16 01:12:50
【问题描述】：

我有一个跨越视口宽度的图像标签（包含 .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

【问题讨论】：

用它作为背景，你可以轻松做到这一点

标签： css image resize crop centering

【解决方案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>

【讨论】：

【解决方案2】：

要让图像适合 div，您可以使用 css like 如下：

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

【讨论】：