Как верстать без указания высоты? Как обрезать вложенный рисунок по размеру родителя? Как не показывать часть рисунка, что не влезает в размер папы?

Question

[Виталий Гусев]

Добрый день!

Товарищи! В столь не простое для страны время я очень прошу вас помочь мне сверстать вот такой блок:


У меня всё получается, но одно требование я никак не могу реализовать - "Нельзя указывать высоту для блоков!" Вот такое условие. Если указать высоту, то всё гуд, всё отлично и просто. Но нельзя.... Такого условие... Высота должна формироваться по содержимому, блин.

Контент должен располагаться в нижней части блока с фоном.

https://codepen.io/guvijur/pen/jOaQjWY

Помогите, добрые люди.

P.S. Друзья! Всем спасибо за помощь! Прям реально помогли.
Сделал в итоге вот так: https://codepen.io/guvijur/pen/VwrqLBO

Comments

[Александр]

.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.block {
    padding:  160px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-self: flex-end; // или justify-self: end;
}

[Виталий Гусев]

Александр, эммм.
А текст поверх картинки при этом будет находиться?

[Александр]

Виталий Гусев, А картинку уже внутрь блока ставьте. Там позиционируете при помощи absolute. Размеры - object-fit.

Answer 1

[Антон Шаманов]

вообще тебе правильно сказали используй фон и масштабирование.
как вариант, используй z-index и выводи изображение нижним слоем что-то вроде Bootstrap5 .stretched-link

Comments

[Виталий Гусев]

Пытался делать через позиционирование, но блин тогда следующий блок с lorem ipsum наползает поверх этого.

[Сергей Ержович]

фон не всегда удобно, с ним много ограничений

[Антон Шаманов]

Виталий Гусев, ханука на твоей улице, малыш - я вспомнил почему мне твой вопрос показался знакомым - я же делал подобные блоки! https://codepen.io/WinterSilence/pen/KZvYqW

[Антон Шаманов]

Виталий Гусев,

Пытался делать через позиционирование, но блин тогда следующий блок с lorem ipsum наползает поверх этого.

тебе что блоков жалко? ну вот и не жадничай - оберни нижний и верхний слой в блок/контейнер c position: relative;

[Антон Шаманов]

этот пример потом внедрили и в bootsrap5, нашел наконец https://getbootstrap.com/docs/5.1/components/card/...

[Виталий Гусев]

Антон Шаманов, сделал вот так:
https://codepen.io/guvijur/pen/VwrqLBO

[Антон Шаманов]

Виталий Гусев, вроде похоже, но css такой себе. ты sass/less не знаешь что ли?

[Виталий Гусев]

Антон Шаманов, я пока учусь. ))
Сказали на css делать без less и sass.

[Антон Шаманов]

Виталий Гусев, так они же компилируются в css

Answer 2

[Сергей Ержович]

Тут без указания ширины и высоты, картинка адаптивно подстраивается под блок


или так что бы ещё и под контент подстраивалось

Answer 3

[Владислав Лысков]

делать рисунок бэкгроундом

Comments

[Виталий Гусев]

Их не будет видно. Высоту блока задавать нельзя. Это условие.

[Владислав Лысков]

Виталий Гусев, дак не задавай, у тебя контент на фоне, чего не будет видно? паддинги добавь

[Виталий Гусев]

Владислав Лысков, запросто, вот только контент в каждом блоке с картинкой разный и высота этого контента будет разная, а стало быть и паддинги. Но сделать надо универсально, чтобы руками не прописывать паддинги для каждого блока. Контент, обрамлённый оранжевой рамкой, должен быть прижат к низу блока. А высота этих блоков с картинками должна быть одинаковой несмотря на размер фоновой Картинки.