How to display images of cards of the same height?

Question

css

There are cards, a picture and information, but images of different sizes, how to make them the same height, let them stretch.

<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

Answer 1

Maybe make one card in css, set its size and use this one card in all cards?

Answer 2

In the card class, remove the flex-wrap property and add it To the poster class , add If the amount of text in the cards is the same, it should work, but there will be problems if the amount of text in the cards is very different. flex-direction: column;

Answer 3

Such things are done by assigning the same size to all elements inside the card. Let card be our card, row-card be the row of cards. Inside the card, let there be elements image - picture, title - title, text - text, button - action button. Then:

Структура карточки:
   .row-card
       .card {
                 image
                 title
                 text
                 button
                 }
        .card.....

Стили:

.row-card {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     justify-content: space-between; }

.card {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /**или center*/
    justify-content: flex-start; /**это важно, чтобы все содержимое */
                                             /**карточки выравнивалось одинаково*/
    width: 150px; /**или какое по макету*/
    padding: 10px; /**или что там по макету, если картинка должна быть во всю */
                            /**ширину без отступов от краев карточки,*/
                            /** то это свойство прописывается у title, text*/
    border: 1px solid #000;
    margin-right: 15px; /**чтобы карточки друг к другу не липли*/
    margin-bottom: 15px; /**чтобы ряды карточке друг к другу не липли*/
    }

.card .image {
    width: 100%;
    height: 150px; /**или то которое по макету*/
    object-fit: cover;}

.card .title {
    width: 100%;
    text-align: center;
    font-size: 20px; /**или сколько по макету*/
    line-height: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 25px; /**присвоение четкой высоты - это залог одинаковых карточек*/
    overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }

.card .text {
    width: 100%;
    font-size: 16px; /**или сколько по макету*/
    line-height: 18px;
    margin-bottom: 10px;
    height: 100px; /**присвоение четкой высоты - это залог одинаковых карточек*/
    overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }

.card .button {
   height: 25px; /**присвоение четкой высоты - это залог одинаковых карточке*/
   font-size: 14px;
   line-height: 18px;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   text-transform: uppercase;
   border: 1px solid inherit;
   background-color: #000;
   width: 50%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 15px;}