Question

说我有一个800x400的图像（可以更改），我想将其放在800x300的容器中（带有overflow: hidden）。我如何使其垂直居中（以便隐藏顶部50px和底部50px）。

请注意，页面上的图像大小可能会发生变化，因此我不能使用margin-top: -50px之类的技巧。但是我可以设置width: 100%使其始终水平填充整个容器，在这种情况下，我们可以假定图像始终比容器高。

例如：

.container {
  width: 800px;
  height: 300px;
  border: 2px solid blue; /*Visually show where the div is.*/
}
.container > img {
  width: 100%;
}

<div class="container">
  <img src="//via.placeholder.com/800x400" />
</div>

Answer 1

通过将图像添加为背景而不是<img ...

可以轻松完成此操作

.container {
  width: 600px;
  height: 300px;
  background-image: url(https://via.placeholder.com/600);
  background-size: cover;
  background-position: center;
}

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

第二种解决方案可能是使用object-fit和object-position。您还必须将图像的宽度和高度设置为100%：

.container {
  width: 600px;
  height: 300px;
}

.container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<div class="container">
  <img src="https://via.placeholder.com/600" />
</div>

Answer 2

您可以使用 object-fit 属性。

object-fit CSS属性设置应如何调整替换元素（例如img或视频）的内容的大小以适合其容器。

对于img，需要定义：

宽度
高度
对象拟合
对象位置

更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

.container {
  width: 800px;
  height: 300px;
  border: 2px solid blue; /*Visually show where the div is.*/
}
.container > img {
  object-fit: cover; /* Cover  means that the img will fill the box and preserve its aspect ratio  */
  object-position: center; /* Position of the image in it's parent */
  width: 100%;
  height: 100%;
}

<div class="container">
  <img src="//via.placeholder.com/800x800" />
</div>

如何在较小的容器中对齐较大的图像中心

2 个答案: