Vertically centre align a cropped image in a div

Question

I'm trying to create a CSS style that will take an image and scale it to best fit a letter box shaped div. The overflow will be cropped off. I'm close with this and it currently looks like this:

The original image is

I'd like to modify this so that the image is centered vertically in the div rather than top aligned. What am I missing here? My html is

.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>

I can't assume the height of the image to be the same everywhere I use this.

Answer 1

You can position the image relatively and then have the browser bump it upward 50% with top:-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>