如何在div（垂直和水平）中居中图像并切断多余的图像？

Question

CSS中是否可以实现以下目标：

以下是html和css：

<div class="preview">
  <img src="/big-ass-image.png" width="150" height="500" border="0"/>
</div>

.preview {
  width: 200px;
  height: 100px;
}

这样只显示div中图像的一部分（上面样例中的灰色框），并显示图像的中间部分，其余部分被剪掉。

Answer 1

希望这可以帮助您查询。如果您有任何问题，请发表评论，我会尝试修改我的帖子以满足您的需求。

.preview {
  background: red;
  width: 200px;
  max-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview:hover {
  overflow: visible;
}

.preview img {
  width: 150px;
}

<div class="preview">
  <img src="http://placehold.it/150x150">
</div>

Answer 2

一种解决方案是在图片上使用position: absolute并将其与transform: translate对齐，并在父级上设置overflow: hidden。

.preview {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
  margin: 50px;
}
img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.preview:hover {
  overflow: visible
}

<div class="preview">
  <img src="http://placehold.it/150x150">
</div>