Как правильно верстать картинки выходящие за рамки контейнера?

Question

[Андрей Самойленко]

Привет, я учусь html-верстке. Хотел спросить, как правильно верстать вот такую картинку в hero секции, которая выходит за рамки ограничивающего контейнера? Делать бэкграундом или блоком с относительным позиционированием? Часто встречаю макеты с таким вот.

Comments

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

бекграундом, абсолютом

Answer 1

[Святослав Смирнов]

Я бы задал padding-left

Comments

[Vladislav]

Святослав Смирнов и как бы ты прописал падингом все это?

[Святослав Смирнов]

Там если задать свойство

box-sizing:border-box;
padding-left:15px;

то возможно это сработает. А так я ещё начинающий, потому возможно даю неправильные ответы.

Answer 2

[Vladislav]

position: absolute; top: 50%; transform: translateY(-50%); right: -30px;

-30 это примерно, там сам смотри значение какое тебе надо