Как мне сложить две пейзажные картинки друг на друга с портретной картинкой на стороне?

Question

ссылка на пример

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

Answer 1

Это начало для вас.

.row {
  display: flex;
}

.row div {
  width: 50%;
}

div {
  margin: 20px;
}

img {
  width:100%
}

<div class="container">
<div class="row">
  <div class="first">
  <img src="https://placehold.it/400x800/ccc/666?text=" class="img-responsive" alt="">
  </div>
  <div class="two">
    <img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
    <img src="https://placehold.it/400x400/ccc/666?text=" class="img-responsive" alt="">
  </div>
</div>
</div>

Answer 2

<div class="main">
     <div class="flexbox">
       <div class="row"><img src="https://via.placeholder.com/150"/>
       </div>
       <div class="row image-wrapper">
         <div class="col"><img src="https://via.placeholder.com/150"></div>
         <div class="col"><img src="https://via.placeholder.com/150"></div>

       </div>

     <div>
</div>

.main {
  width: 500px;

}

.flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

 .col {
  width: 100%;
  height: 250px;

  box-sizing: border-box;
  padding: 10px;
}


.col img {
  background: red;
  width: 100%;
  height: 100%;
}

.row {
  width: 50%; 
  height: 500px;
  padding: 10px;
  box-sizing: border-box;
}


.row img {
  background: black;
  width: 100%;
  height: 100%;
}

.row.image-wrapper {
  padding: 0;
}

https://codepen.io/stargroup0075/pen/ExjMPXK