#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Стиль .card__img{ height: 220px; }HEADING
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.
Ответ 2
Нашел ответ на свой вопрос. Нужно было добавить картинку не через img, а через backgound-image. И к картинке добавить: background-repeat: no-repeat; background-size: cover; background-position: center center;Ответ 3
Оберните картинки блоками и задайте не фиксированную высоту, а минимальную min-height. И установите приемлемое значение, это должно помочь.
Комментариев нет:
Отправить комментарий