S
S
sasha-ld2022-04-18 10:54:48
css
sasha-ld, 2022-04-18 10:54:48

How to display images of cards of the same height?

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 the question

In order to leave comments, you need to log in

3 answer(s)
D
dyzg, 2022-04-18
@dyzg

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

N
nnikolaev, 2022-04-29
@nnikolaev

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;

E
Elena Fire, 2022-05-12
@BormotunJedy

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;}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question