How can I make the images have the same height?

Question

css

Hello, tell me how to make the pictures have the same height (cropped or slightly distorted, it doesn’t matter)
From the bottom they are all different, you need to align the

css

html

Answer 1

Either make it overflow:hiddenon the container, or insert it through the background-image with the parameterbackground-size: cover

Answer 2

Look at the size variation. If it is very large, then it makes sense to convert them on the server.
And so, insert the picture as a background and set the positioning in the center. More or less like this.

img {
bacground-image: url(картинка.png);
background-position: 50%;
}

There is also background-size: cover. It stretches the background image according to the width and height of the block.

Answer 3

<div>
<img>
</div>

.div {
width: 200px;
height: 300px;
}
.div img {
width: 100%;
height: 100%;
}

And the lower block with a negative margin.

Answer 4

.shortstory {
   height: вставь нужную высоту родителя в пикселях;
}

.shortstory img {
   height:100%;
}

Well, fix it in html, add a class before the link

<div class="shortstory">
    <a href="{full-link}">