Задать вопрос
@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
  • Вопрос задан
  • 1191 просмотр
Подписаться 3 Средний 2 комментария
Ответ пользователя dyzg К ответам на вопрос (3)
@dyzg
Может быть сделать в css одну card, выставить ей размер и использовать этот один card во всех карточках?
Ответ написан
Комментировать