CODEWITHSUNDEEP
phphtmlimage
kmkm
kmkm

Reputation: 13

How do I stack two landscape pictures on top of each other with a portrait picture on the side?

link to example

Getting the black portrait box is easy, but how do I create something like the two red boxes right on top of each other? I know one solution is to export the two landscapes with the gap as one image and put it in as a portrait but I'd prefer to not do it like that.

Upvotes: 1

Views: 248

Answers (2)

user11133653
user11133653

Reputation: 

<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

Upvotes: 0

shutupchigo
shutupchigo

Reputation: 709

This is a start for you. 

.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>

Upvotes: 1

Related Questions