垂直居中对齐div

Question

我试图创建一个CSS样式，它将拍摄图像并将其缩放到最适合信箱形状的div。溢出将被裁掉。我和它关系密切，目前看起来像这样：

原始图片是

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

＆＃13;

＆＃13;

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

.crop img {
  width: 670px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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>

Answer 2

您可以使用CSS httpd.conf属性。
https://www.w3schools.com/cssref/pr_background-position.asp

background-position

.crop {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-image: url('http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}