Center the alignment of the cropped image in a div vertically

Question

I am trying to create a CSS style that will take an image and scale it so that it best matches the shape of the div in the form of letters. Overflow will be cut off. I am close with this, and now it looks like this:

Source image

I would like to change this so that the image is centered vertically in the div and not the top. What am I missing here? My 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>

Run codeHide result

I can’t assume that the height of the image is the same everywhere I use it.

Answer 1

You can position the image relatively, and then the browser will increase it by 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>

Run codeHide result

Answer 2

CSS background-position.
https://www.w3schools.com/cssref/pr_background-position.asp

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

<div class='crop'></div>

Hide result