CSS Image overflow hidden without stretch

I am trying to reduce the thumbnail’s height without stretching the image. Despite I wrote my code in React I know is pure CSS.

For example, I used a sample screenshot from Wikipedia, its height is too large to fit “in a thumbnail” so I need to reduce it so a JavaScript library can autoscroll it when hover event is triggered (but this is a future step).

The following image is how the thumbnail should look like:

Instead it displays the whole image, as you can see below:

.image {
  width: 200px;
}

.image-link {
  height: 400px;
  overflow: hidden;
}

<a class="image-link" href="#">
  <img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>

So, how can I reduce the image’s height without stretching it or overflowing the a?

Answer

Add display: block; (or inline-block, depending on the situation) to the class of the a tag, otherwise it’s an inline element on which your height setting (and with it the overflow: hidden) won’t have any effect:

.image {
  width: 200px;
}

.image-link {
  display: block;
  height: 400px;
  overflow: hidden;
}

<a class="image-link" href="#">
  <img src="https://storage.googleapis.com/openscreenshot/A%2FG%2FO/AsjRlWOGA.png" class="image" />
</a>