Как вытащить элемент из его контейнера к левому ИЛИ правому краю браузера, когда изображение НЕ находится в центрированном контейнере

Question

Я пытаюсь создать макет, как показано на рисунке здесь, где:

• У меня есть макет из трех столбцов
• Элемент div имеет ширину, равную двум столбцам
• В элементе div, ширина которого составляет два столбца, находится изображение, которое мне нужно вытащить влево до границы браузера, а правую сторону до изображения, чтобы оно оставалось таким же широким, как и оставшиеся два столбца. " застрял "вправо

Я использовал этот код и применил его к изображению в столбце, но, честно говоря, Я не понимаю, что он делает:

margin-left: calc( -100vw/2 + 100%/2);

HTML

<div class="wrapper">
<div class="col-1"><img src="blabla" /></div>
<div class="col-2">Content</div>
</div>

CSS

.wrapper {
max-width: 1400px;
display: block;
margin: auto;
}

.col-1 {
float: left;
width:66.666%;
}

.col-2 {
float: left;
width: 33.333%;
}

.col-1 img {
display: block;
width: 100%;
height: auto;
margin-left: calc( -100vw/2 + 100%/2);
}

В результате он тянет к левый край браузера, но правая сторона изображения не остается на месте.

Я не понимаю, что мне нужно сделать, чтобы достичь этого макета, и, возможно, это даже невозможно.

https://imgur.com/a/GjsHrcF

Answer 1

Это простая математика:

Вы должны вычислить 2 параметра
1. Смещение <img> - (1/2 от viewport width - 1/2 .wrapper ширины),
2. width из <img> - (100% .col-1 + сдвиг от вышеупомянутого)

Где
1. Ширина viewport - 100vw
2. Ширина .col-1 - 100% .col-1
3. Ширина .wrapper - 150% из .col-1

<img> является потомком .col-1, поэтому размеры % относятся к .col-1 width.

Давайте назовем c
1. shift = (100vw/2 - 150%/2) = (50vw - 75%)
2. width = (100% + 50vw - 75%) = (25% + 50vw)

Обратите внимание:
margin-left должно быть отрицательным для сдвига влево, поэтому
margin-left = (75% - 50vw)

Вы можете запустить фрагмент в полноэкранном режиме и изменить размер окна: оно реагирует.

html,
body {
  margin: 0;
  padding: 0
}

* {
  box-sizing: border-box
}

.wrapper {
  width: 80vw; /* for example, may be any */
  max-width: 1400px;
  display: flex;
  margin: auto;
}

.wrapper div {
  border: solid 1px
}

.col-1 {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 66.666%;
  background: #693
}

.col-1-2 {
  width: 50%
}

.col-2 {
  width: 33.333%;
  background: #e43;
}

.col-1 img {
  display: block;
  width: calc(25% + 50vw);
  margin-left: calc(75% - 50vw);
  opacity: .75; /* for example verbosity */
}

<div class="wrapper">
  <div class="col-1">
    <img src="https://picsum.photos/600/300" />
    <div class="col-1-2">Content</div>
    <div class="col-1-2">Content</div>
  </div>
  <div class="col-2">Content</div>
</div>

Answer 2

CSS -Сетка может приблизиться к тому, что вы ищете ... но я сомневаюсь в отзывчивости изображения.

FWIW.

.super-con {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(auto, 500px)) auto;
}

.super-con div {
  border: 1px solid red;
}

.image {
  grid-column: 1 / span 3
}

.image img {
  width: 100%;
  max-height: auto;
  display: block;
}

div:nth-child(3) {
  grid-column-start: 2;
}

<div class="super-con">
  <div class="image"><img src="http://www.fillmurray.com/150/150" alt=""></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>