html - 垂直居中对齐 div 中的裁剪图像

Question

我正在尝试创建一个 CSS 样式，它将获取图像并将其缩放以最适合信箱形状的 div。溢出将被裁掉。我很接近这个，它目前看起来像这样:

原图为

我想对此进行修改，使图像在 div 中垂直居中，而不是顶部对齐。我在这里错过了什么？我的 html 是

.crop {
  width: 670px;
  height: 200px;
  overflow: hidden;
}

.crop img {
  width: 670px;
}

<div class='crop'>
  <img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>

我不能假设图像的高度在我使用它的任何地方都是相同的。

Answer 1

您可以相对定位图像，然后让浏览器使用 top:-50%; 将其向上提升 50%:

.crop {
  width: 670px;
  height: 200px;
  overflow: hidden;
}

.crop img {
  width: 670px;
  position:relative;
  top:-50%;
}

<div class='crop'>
  <img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>