Question

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

该图像是自举轮播的一部分，被认为是网站的宣传标语。我已经尝试过使用图像作为背景图像，并且它的工作方式完全符合我的要求，但是我更愿意为此使用图像标签（可访问性和其他控件首选项）。我还尝试了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

要使图像适合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

Answer 2

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 个答案: