Макет Flexbox с наложением изображений

Question

Я столкнулся с проблемой, где я пытаюсь повторить это:

Не получается, чтобы изображение занимало ширину контейнера и перекрывало черный ящик. У меня была рабочая копия, но она не была дружественной для мобильных устройств. Вот быстрый пример в codepen: https://codepen.io/pandar3n/pen/jQqvjm

HTML:

<div class="test-container">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>
</div>

<div class="test-container alt">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>

SCSS

*{
  font-family: sans-serif;
}
.test-container {
  .wrapper {
    max-width: 80vw;
    margin: 50px auto;
    position: relative;
    display: flex;
    height: 80vh;
  }
  .test-text {
    width: 50%;
    background-color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .testtext-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
  }

.test-img {
  width: 50%;
  align-self: center;

  img {
    transform: translateX(80px);
  }
}

&.alt {
  .test-text {
    order: 1;

    .testtext-inner {
      padding-right: 150px;
      padding-left: 50px;
    }
  }
  .test-img {
    order: 2;

    img {
      transform: translateX(-80px);
    }
  }
}
}

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

Сработает ли 60% 50% сгиб?

Answer 1

Обновление: мне удалось как-то заставить его работать с flexbox, в этом случае мне пришлось наложить div поверх другого, чтобы произошло перекрытие.

HTML:

<div class="block">
  <div class="image-wrapper">
  <img src="https://placekitten.com/600/400"/>
</div>
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
</div>

<div class="block">
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
  <div class="image-wrapper">
  <img src="https://placekitten.com/900/300"/>
</div>
</div>

<div class="wrapper2">
  <div class="image-overlay">
    <img src="https://placekitten.com/600/400"/>
  </div>
  <div class="row-wrapper">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

<div class="wrapper2">
  <div class="image-overlay alt">
    <div class="overlay-filler"></div>
    <div class="image-me">
      <img src="https://placekitten.com/600/400"/>
    </div>
  </div>
  <div class="row-wrapper alt">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

SCSS:

.block{
  width: 600px;
  margin: 0 auto;
  border: 1px solid black;
}
.div-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
}
.image-wrapper{
  width: 100%;
  text-align: center;
}
.image-wrapper > img {
  width: 100%;
}


/* Second Block */
.wrapper2{
  width: 80%;
  margin: 0 auto;
  border: 1px solid purple;
  height: 100vh;
}
.row-wrapper{
  display: flex;
  &.alt {
    .filler{
      order: 1;
    }
  }
}
.filler{
  width: 50%;
}
.text-block{
  width: 50%;
  background: blue;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.text-wrapper{
  width: 50%;
}
.image-overlay{
  width: 45%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  &.alt{
    width: 100%;
    .overlay-filler{
      width: 15%;
    }
    .image-me{
      width: 45%;
      img{
      width: 100%;
    }
    }
  }
}
.image-overlay > img {
  width: 100%;
}

Объяснение: Как это работает, так это то, что в одном контейнере два div; overlay-div и row-wrapper (могли бы назвать его другими вещами). overlay-div имеет абсолютную позицию, которая будет располагаться поверх строки-оболочки.

row-wrapper - это flexbox с наполнителем и текстовым блоком.

Просто небольшое замечание, что для того, чтобы это работало, высота обертки должна быть установлена ​​на 100vh.

Answer 2

Значения зависят от размеров вашего изображения, но я чувствую, что вы слишком усложнили CSS, см. Следующий пример: https://codepen.io/anon/pen/mQPvZW

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.row {
  background: #333;
  display: flex;
  margin: 20px;

  .col {
    background: #c33;
    flex-grow: 0;
    margin: 10px;
    min-height: 400px;
    padding: 20px;
    position: relative;
    width: 60%;

    &:first-child {
      margin-right: 0;
      width: 40%;
    }

    img {
        height: 300px;
        position: absolute;
        // Adjust the indent of the image as necessary.
        // 30px calculated by 20px padding + 10px margin gutter.
        right: -30px;
        z-index: 1;

        // If you want to vertically align in the area assuming you dont know the dimensions of the image.
        top: 50%;
        transform: translateY(-50%);
      }
  }

  + .row .col {
    width: 40%;

    img {
      right: auto;
      left: -30px;
    }

    &:first-child {
      width: 60%;
    }
  }
}

Краткое пояснение ниже с изображением, изображающимстили:

• Черный ящик: обертка Flex.
• Красная коробка: элемент Flex (обратите внимание, как они оба должны заполнить всю область изгиба).
• Синяя коробка: Элемент изображения абсолютно расположен в гибком контейнере.

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