Как сверстать блок?

Question

[madridist13]

Начинающий верстальщик. Возникла сложность с данным блоком. Пробовал через background и через img - не получилось. Буду благодарен за совет.
Верхний и нижний блоки с максимальной высотой и выровнены по центру. Изображение должно вплотную прижиматься к левой стороне. Правый край должен быть выровнен по линии окружающих блоков.

Comments

[alex]

flex, object-fit

[Сергей Горячев]

Alex, флекс тут ни к чему в принципе :)

[alex]

Сергей Горячев, это почему?

[Сергей Горячев]

Alex, ну, есть решать конкретную задачу

Верхний и нижний блоки с максимальной высотой и выровнены по центру. Изображение должно вплотную прижиматься к левой стороне. Правый край должен быть выровнен по линии окружающих блоков.

флекс не нужен. Тут background-image и собственно все :)

Можно через object-fit, не критично, но через него больше телодвижений с позиционированием картинки влево.

[Сергей Горячев]

Alex, вот примерное решение конкретной задачи) Все-таки пришлось накидать)
https://jsfiddle.net/oz8mgcwp/
Тут не нужен флекс)

[alex]

Сергей Горячев, ну в принципе согласен. хотя тут автор вводные дал немного бредовые, когда он поймет, что растягивающая фотка на пол монитора это не очень круто он захочет ее ограничить по ширине, тогда можно и флекс применить с отрицательными маргинами, а фон через псевдо сделать. а вот картинку я бы подзапарился и сделал бы через img т.к. я немного повернут на семантике

[Сергей Горячев]

Alex, да лично я тоже сделал бы картинку картинкой object-fit в обертке с oveflow hidden. Но объяснять это куда сложнее)))

Answer 1

[Сергей Горячев]

А в разделе MY SKILLS надо будет написать "Умею задавать вопросы на Тостере, сам ничего не делаю".

Решение есть тут например.
Кто как адаптивно верстает 50% бэкграунды (слева одна картинка, справа другая)?
Там более сложный пример, но думаю, при правильном рассмотрении примера, разберетесь.

Хотя у этой задачи есть и другие способы решения, возможно кто-то опишет их еще.
Я дал именно этот пример, так как давал ответ туда, и он мне просто запомнился.
Искать какие-то другие решения на Тостере или писать свое решение под вашу задачу - не вариант.

PS: Когда что-то пытаетесь делать, прикладывайте СВОЙ код, который не получился.
Вам будут указывать на ошибки и давать советы.
А делать верстку за вас никто не будет, тем более на сервисе Вопросов и Ответов.

PPS: На большом мониторе в вашем примере будет большая жопа, так как картинка растянется по ширине и на всю высоту блока будет лицо, а не полная фигура человека %)))
Если вы реально запланировали сделать картинку прижатой к левому краю.

Удачного плавания на просторах сайтостроения :)

PPPS: Короче, пришлось все-таки для ответа нарисовать пример.
https://jsfiddle.net/oz8mgcwp/
Но большего не сделаю)))