Есть карточки, картинка и информация, но изображения разных размеров, как сделать что бы они были одной высоты, пусть растягиваются.
<div class="wrapper">
<div class="card-wrapper">
<div class="card">
<div class="poster">
<img src="https://diasp.org/uploads/images/4663b2c12c0e4c0c5cae.jpg" alt="">
</div>
<div class="info">
<span class="name">Название</span>
<span class="genres">Боевик, фантастика</span>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div class="poster">
<img src="https://i.pinimg.com/736x/9c/32/3a/9c323abe7fb94db3e94f4ce44b9e2ae4--seattle-washington-washington-state.jpg" alt="">
</div>
<div class="info">
<span class="name">Название</span>
<span class="genres">Боевик, фантастика, триллер</span>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div class="poster">
<img src="https://diasp.org/uploads/images/4663b2c12c0e4c0c5cae.jpg" alt="">
</div>
<div class="info">
<span class="name">Название</span>
<span class="genres">Боевик, фантастика</span>
</div>
</div>
</div>
<div class="card-wrapper">
<div class="card">
<div class="poster">
<img src="https://i.pinimg.com/736x/9c/32/3a/9c323abe7fb94db3e94f4ce44b9e2ae4--seattle-washington-washington-state.jpg" alt="">
</div>
<div class="info">
<span class="name">Название</span>
<span class="genres">Боевик, фантастика</span>
</div>
</div>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.card-wrapper{
display: flex;
border: 1px solid black;
width: 25%;
padding: 0px;
}
.card{
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.poster{
width: 100%;
}
img{
display: block;
width: 100%;
height: 100%;
}
.info{
display: flex;
flex-direction: column;
}
https://codepen.io/sasha-ld/pen/OJzrWWo