Страницы

Поиск по вопросам

понедельник, 2 марта 2020 г.

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

#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. И установите приемлемое значение, это должно помочь.

Комментариев нет:

Отправить комментарий