Как выставить изображения карточек одной высоты?

Question

[sasha-ld]

Есть карточки, картинка и информация, но изображения разных размеров, как сделать что бы они были одной высоты, пусть растягиваются.

<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

Comments

[Сергей delphinpro]

.card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

[seritx]

не оборачивай картинки в div

Answer 1

[dyzg]

Может быть сделать в css одну card, выставить ей размер и использовать этот один card во всех карточках?

Answer 2

[nnikolaev]

В классе card убрать свойство flex-wrap и добавить flex-direction: column;
К классу poster добавить flex-grow: 1;
При одинаковом количестве текста в карточках должно сработать, но возникнут проблемы, если количество текста в карточках будет сильно отличаться.

Answer 3

[Elena Fire]

Такие вещи верстаются через присвоение одинакового размера всем элементам внутри карточки. Пусть card - это наша карточка, row-card - это ряд карточек. Внутри card пусть будут элементы image - картинка, title - название, text - текст, button - кнопка действия. Тогда:

Структура карточки:
   .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;}