html - 如何在容器内隐藏图像的额外顶部和底部？

Question

我的意思是有一张图片的尺寸W:200px，H:300px。它位于 inline-block 元素 div 内。 div的高和宽分别为200px、200px。所以图像的额外部分有 100px，它在垂直方向上流出 div。我不想更改图像的尺寸。我只想在 div 的中间垂直对齐该图像，这意味着顶部和底部的图像的相等部分将超出 div。稍后我想隐藏那些多余的部分。 示例:

<div id="body">
 <div id="container">
  <img src=""/>
 </div>
</div>

有什么解决办法吗？使用 CSS？

Answer 1

使用transform: translateY(); 和overflow: hidden。

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  overflow: hidden;
}
.container img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

This <img src="http://lorempixel.com/200/300/animals/5"/> become this
<div class="container">
  <img src="http://lorempixel.com/200/300/animals/5"/>
</div>

---

当您在 div 上使用固定宽度/高度时，这里有一个很好的提示，即使用背景属性并仍然在标记中设置图像源，就像处理图像一样。

像这样的解决方案将居中并裁剪任何大小的图像。

.container {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  background: center center / cover;
}

These becoms like this<br>
<div class="container" style="background-image: url(http://lorempixel.com/200/300/animals/5)">
</div>
<div class="container" style="background-image: url(http://lorempixel.com/400/200/animals/7)">
</div>
<div class="container" style="background-image: url(http://lorempixel.com/400/600/animals/3)">
</div>

<br>which originally looks like this<br>

<img src="http://lorempixel.com/200/300/animals/5">
<img src="http://lorempixel.com/400/200/animals/7">
<img src="http://lorempixel.com/400/600/animals/3">