Skip to content Skip to sidebar Skip to footer

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;
}
<divclass="wrapper"><divclass="carousel"><imgsrc="http://placeimg.com/800/600/any"class="carousel-img"></div><divclass="side-images"><ahref="#"class="img-wrapper"><imgsrc="http://placeimg.com/480/480/any"class="img1"></a><ahref="#"class="img-wrapper"><imgsrc="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;
}
<divclass="wrapper"><divclass="carousel"><imgsrc="http://placeimg.com/800/600/any"class="carousel-img"></div><divclass="side-images"><ahref="#"class="img-wrapper"><imgsrc="http://placeimg.com/480/480/any"class="img1"></a><ahref="#"class="img-wrapper"><imgsrc="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;
}
<divclass="wrapper"><divclass="carousel"><imgsrc="http://placeimg.com/800/600/any"class="carousel-img"></div><divclass="side-images"><ahref="#"class="img-wrapper"><imgsrc="http://placeimg.com/300/480/any"class="img1"></a><ahref="#"class="img-wrapper"><imgsrc="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;
}
<divclass="wrapper"><divclass="carousel"><imgsrc="http://placeimg.com/800/600/any"class="carousel-img"></div><divclass="side-images"><ahref="#"class="img-wrapper"><imgsrc="http://placeimg.com/300/480/any"class="img1"></a><ahref="#"class="img-wrapper"><imgsrc="http://placeimg.com/200/100/any"class="img2"></a></div></div>

Solution 2:

<divclass="wrapper"><divclass="main-image"><imgsrc="http://placeimg.com/800/600/any"></div><divclass="side-image"><ahref="#"><imgsrc="http://placeimg.com/480/480/any"></a><ahref="#" ><imgsrc="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.

Post a Comment for "How To Line Up Two Side Images And One Bigger Image & Keep Aspect Ratio"