How To Line Up Two Side Images And One Bigger Image & Keep Aspect Ratio
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"