Как выбить изображение за предлы контейнера на конкретую ширину?

Question

[Полина Емельянова]

Добрый день.
Прошу помощи отверстать макет с прорвавшим контейнеры изображением.
Имидж - контентный. Поместить его бекграундом не выйдет.
Ширина изображения должна зависеть от колонки, в которой оно сидит и упираться в край экрана.
Высота должна подстраиваться под контент.

Отрицательные маргины не помогли. Или я не понимаю как и чему тут задавать...
Абсолют не помогает, т.к. ближайший родитель отрезает нужную мне ширину, которая должна упираться во вьюпорт.
Волшебного числа не вижу.)

Вот больной


Вот как надо, чтобы было


Заранее благодарю, за любой ответ.

Comments

[RAX7]

.accotdion__media {
  flex: 0 1 45vw; // <- vw
  
  // -20px -> .container padding
  // 5.555% -> .accordion__row (100% - 90%) / 2 == 5%
  //           5% * 100 / 90 == 5.555%
  margin-left: calc(-20px - 5.555%);

[cssfish]

RAX7, это до вьюпорта не дотянет

[RAX7]

cssfish, дотянет, просто нужно еще медиа запрос добавить

.accotdion__media {
  &.wide {
    flex: 0 1 45vw;

    // -20px -> .container padding
    // 5.555% -> .accordion__row (100% - 90%) / 2 == 5%
    //           5% * 100 / 90 == 5.555%
    margin-left: calc(-20px - 5.555%);
    
    @media(min-width: 1340px) {
      margin-left: calc(-20px - 5.555% - (100vw - 1340px) / 2);
    }

[cssfish]

RAX7, смотрю на 1920 например. при таком раскладе правая граница картинки уезжать начинает левее

[RAX7]

cssfish, тогда так:

@media(min-width: 1340px) {
  margin-left: calc(-5.555% - (100vw - 1340px) / 2);
}

будет уезжать только на половину ширины скрол бара

[cssfish]

RAX7, не тут все равно что-то не так. пробовал 1920 и 2560... дельта справа там все больше и больше выходит.. на 2560 около 66px уходит правый край влево.

а почему именно 45vw? я так и не понял.

[RAX7]

cssfish

дельта справа там все больше и больше выходит

все правильно, потому что у .accordion__content ширина в процентах и соответственно чем больше ширина, тем больше отступ.

.accordion__content {
    flex: 0 1 45%;
}

почему именно 45vw

было 45% я заменил на 45vw, но можно и на 50vw, это по макету смотреть нужно.

Answer 1

[cssfish]

картинке лепите оберточку с маржином влево.
проблемы только с % будут...

p.s.
неясно, до левой стенки которого контейнера надо двигать? accordion?

Comments

[Полина Емельянова]

До экранной. До вьюпорта, выходит.((( В том и загвоздка...

[cssfish]

Полина Емельянова, а если шириа монитора 2000+ ?

[Полина Емельянова]

cssfish, а хоть телевизор. Дизайнер нарисовал)
Надо реализовать....

[cssfish]

Полина Емельянова, ну тогда в каждом диапазоне где меняется ширина центр колонки и внутренней колонки, придется писать немного отличающиеся стили.

например для 1380+ (это 1340+ 20+20) алгоритм примерно такой:

берем ширину в полэкрана (50vw)
вычитаем половину контенйера (1340) - а точнее половину от 0.9 контейнера
добавлем бордер (если есть)

итого для обертки картинки получим
margin-left: calc(-50vw + (1340px * 0.9 / 2) + 2px);
height: 100%;

[cssfish]

для прочих диапазонов думаю сами справитесь )