Как правильно сверстать такой блок?

Question

[Константин Масленников]

Нужна помощь в верстке макета.


Нужно чтобы картинка была приклеена к левому краю экрана на любом разрешении.
А блок с текстом не должен выходить за границы контейнера.

При этом чтобы никуда ничего не съезжало, а было по центру контейнера.
Картинку можно вставить только инлайном или фоном, главное не использовать псевдоэлементы.

Comments

[Антон Литвиненко]

а что не получается то?
тут вариантов хватает, можно картинку бекграундом, можно абсолютом итд

[Константин Масленников]

не получается картинку сделать зависимой от контейнера
нужно чтобы при масштабирование страницы она оставалась в контейнере на 30%, и была приклеена к краю страницы

Answer 1

[Арсений Матыцин]

Используй гриды в логике

grid-template-columns: calc((100% - 1200px)/2)) 3fr 7fr calc((100% - 1200px)/2))

. Тогда пикче можно задать позицию grid-column: 1 / span 2, а тексту grid-column-end: span 1.

Шаманские танцы с позиционированием это атавизм прошлого.

Comments

[Константин Масленников]

Спасибо! Все получилось.

Answer 2

[Максим Иванов]

Если неправильно понял извиняюсь):
Контейнеру максимальную ширину 1200пх даёшь. Картинка будет занимать 30% от 1200пх, а текст 70%(остальное пространство в контейнере)