How to line up two side images and one bigger image & keep aspect ratio

Question

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:

Answer 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;
}

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;
}

---

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;
}

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;
}