Как растянуть элементы по всей высоте другого блока?

#html #css

Есть 2 блока, в каждом из которых есть по картинке, по заголовку и по описанию.
Выглядит это так


Как можно сделать так без JS, JQUERY, FLEXBOX? В данном проекте использую display: table;





.cards {
    display: table;
    margin-top: 45px;
}

.card {
    width: 45%;
    text-align: center;
    display: table-cell;
    vertical-align: top;
    height: 100%;
    position: relative;
}

.card-mg {
    width: 10%;
    height: 100%;
}

.card-padding {
    height: 100%;
    padding: 0 5% 0 5%;
}

.card img {
    width: 100%;
}

.card h1 {
    font-weight: 300;
    margin: 5% 0 5% 0;
}

.card h4 {
    font-weight: 100;
}

                

                    
                    

                        
HEADING
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Non, praesentium.
                    
                
                

                    
                
                

                    
                    

                        
HEADING
                        
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Non, praesentium.
                    
                
            



    

Ответы

Ответ 1

Если позволяет сделать фиксированный по высоте блок, то сделать обертку картинке
и задать обертке height:220px


        

    
    
    

      

      
HEADING
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.
        
    
  


Стиль

.card__img{
  height: 220px;
 }


Ответ 2

Нашел ответ на свой вопрос.
Нужно было добавить картинку не через img, а через backgound-image.
И к картинке добавить:

background-repeat: no-repeat;
background-size: cover;
background-position: center center;


Ответ 3

Оберните картинки блоками и задайте не фиксированную высоту, а минимальную min-height.
И установите приемлемое значение, это должно помочь.