html - 如何排列两个侧面图像和一个更大的图像并保持纵横比

Question

我试图将右侧的两张图片与左侧的主图片对齐，并将侧面图片排列在顶部和底部。就像这张图片:

下面的代码是我正在尝试的简化版本。我遇到的困难是，我无法将 wrapper 的顶部边缘和底部边缘准确地排列在一起，而不会出现图像溢出，并且在调整窗口大小时保持排列同时保持纵横比 。有什么方法可以让它正确地放大到那些完美的边界并调整所有 3 个图像的大小以保持它们的宽高比与屏幕尺寸的关系？

此外，图片是否必须具有某种特定尺寸才能使其正常工作？

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

任何帮助将不胜感激

Answer 1

如果我们考虑到这样一个事实，即您知道较大图像的纵横比，并且右侧总是有方形图像，那么您可以做一些数学运算。在左侧，我们需要 HeightL/WidthL = Ratio。在右侧，我们需要 HeightR = 2 * WidthR。我们还有 HeightL=HeightR 和 widthL + widthR = 100%。

由此我们得到:

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

在您的示例中，我们有 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 的地方，你只需要一个公式:

.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 是正确图像的比例，我们将得到

 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 张图像，所有图像的比例都不同，那么公式将是:

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

其中R是大图和R1的比例，R2是右图的比例:

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