如何排列两个侧面图像和一个较大图像&保持长宽比例 [英] 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:

下面的代码是我正在尝试的简化版本。我遇到的困难是我无法对齐包装器的顶部边缘和底部边缘，以确保没有图像溢出，并且在调整窗口大小时在保持宽高比的同时保持对齐 。有什么方法可以正确缩放到那些完美的边框并调整所有3张图像的大小，并保持其长宽比与屏幕尺寸有关？

The code below is a simplified version of what i'm trying. The difficulty I'm having is that I can't line up the top edge and bottom edge of the wrapper to be exact with no overflow of the images and to stay lined up while preserving the aspect ratio when I resize the window. Is there any way to have it scale up to those perfect borders correctly and resize all 3 images keeping their aspect ratio in relation to screen size?

此外，这些图像是否具有

Also, do the images have to be some kind of specific dimensions for this to work?

.wrapper{
    position: relative;
    display: inline-block;
    width: 100%;
}

.carousel{
    position: relative;
    background-color:crimson;
    float: left;
    width: 78%;
}

.side-images{
    width: 22%;
    display: inline-flex;
    flex-direction: column;
}

.img-wrapper{
    width: 100%;
    height: auto;
}

.carousel-img{
    width: 100%;
    height: auto;
}

.img1{
    background-color:darkgoldenrod;
    width: 100%;
    height: auto;
}

.img2{
    background-color: rebeccapurple;
    width: 100%;
    height: auto;
}

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>

任何帮助都会非常感谢

推荐答案

如果我们考虑到这样一个事实，即您知道较大图像的纵横比，并且您将始终拥有正方形图像然后您可以在右侧进行一些数学运算。在左侧，我们需要具有 HeightL / WidthL = Ratio 。在右侧，我们需要 HeightR = 2 * WidthR 。我们还有 HeightL = HeightR 和 widthL + widthR = 100％。

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

从中我们得到：

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

在您的示例中，我们有比率= 0.75

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>

在只需要一个公式的地方简化使用flexbox的操作：

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>

如果正确的图像不是正方形，我们可以添加更多的数学运算，而不是 HeightR = 2 * WidthR ，我们将得到 HeightR = 2 * RatioR * WidthR 其中 RatioR 是正确图像的比率，我们将得到

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>

假设我们将有3个图像，所有图像的比率不同，则公式将为：

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)

其中 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>

这篇关于如何排列两个侧面图像和一个较大图像&保持长宽比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！