How To Line Up Two Side Images And One Bigger Image & Keep Aspect Ratio

I'm trying to line up two images on the right side with the main image on the left and for the side images to be lined up at the top and bottom. Like in this image: The code below

Solution 1:

If we consider the fact that you know the aspect ratio of the bigger image and you will always have square images on the right side you can then do some maths. On the left side we need to have HeightL/WidthL = Ratio. On the right side we need to have HeightR = 2 * WidthR. We also have HeightL=HeightR and widthL + widthR = 100%.

From this we obtain:

WidthL = 200%/(Ratio + 2)
HeightL = (Ratio*100%)/(Ratio + 2)

In your example we have Ratio = 0.75

.carousel {
  float: left;
  width: calc(200%/2.75);
}

.side-images {
  float: left;
  width: calc((0.75*100%)/2.75);
}

.img-wrapper{
  display: block;
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="carousel">
    <img src="http://placeimg.com/800/600/any" class="carousel-img">
  </div>
  <div class="side-images">
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/480/480/any" class="img1">
    </a>
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/480/480/any" class="img2">
    </a>
  </div>
</div>

That you can simplify using flexbox where you need only one formula:

.wrapper {
  display:flex;
}
.carousel {
  width: calc(200%/2.75);
}

.side-images {
   flex-grow:1;
   flex-basis:0%;
}

.img-wrapper{
  display: block;
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="carousel">
    <img src="http://placeimg.com/800/600/any" class="carousel-img">
  </div>
  <div class="side-images">
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/480/480/any" class="img1">
    </a>
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/480/480/any" class="img2">
    </a>
  </div>
</div>

---

In case the right image will not be square we can add more math and instead of HeightR = 2 * WidthR we will have HeightR = 2 * RatioR * WidthR where RatioR is the ratio of the right images and we will get

 WidthL = (200% * RatioR)/(Ratio + 2*RatioR)

.wrapper {
  display:flex;
}
.carousel {
  width: calc((200% * 1.6)/(0.75 + 2*1.6));
}

.side-images {
   flex-grow:1;
   flex-basis:0%;
}

.img-wrapper{
  display: block;
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="carousel">
    <img src="http://placeimg.com/800/600/any" class="carousel-img">
  </div>
  <div class="side-images">
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/300/480/any" class="img1">
    </a>
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/150/240/any" class="img2">
    </a>
  </div>
</div>

And if we suppose we will have 3 images all with different ratio then the formula will be:

WidthL = (100% * (R1 + R2) )/(R + R1 + R2)

Where R is the ratio of the big Image and R1,R2 the ratio of the right images:

.wrapper {
  display:flex;
}
.carousel {
  width: calc((100% * (0.5 + 1.6))/(0.75 + 0.5 + 1.6));
}

.side-images {
   flex-grow:1;
   flex-basis:0%;
}

.img-wrapper{
  display: block;
}

img {
  width: 100%;
  display: block;
}

body {
  margin: 0;
}

<div class="wrapper">
  <div class="carousel">
    <img src="http://placeimg.com/800/600/any" class="carousel-img">
  </div>
  <div class="side-images">
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/300/480/any" class="img1">
    </a>
    <a href="#" class="img-wrapper">
      <img src="http://placeimg.com/200/100/any" class="img2">
    </a>
  </div>
</div>

Solution 2:

   <div class="wrapper">
        <div class="main-image">
            <img src="http://placeimg.com/800/600/any">
        </div>
        <div class="side-image">
            <a href="#">
                <img src="http://placeimg.com/480/480/any">
            </a>
            <a href="#" >
                <img src="http://placeimg.com/480/480/any">
            </a>
        </div>
    </div>

.wrapper{
    display: flex;
    overflow: hidden;
    max-height: 600px;
}
.main-image{
    width: 80%;
}
.main-image img{
    width: 100%;
    height: 100%;
}
.side-image{
    width: 20%;
}
.side-image img{
    width:100%;
    height: 50%;
}
  I set a max-height:600px you can change whatever you want.