如何将一个垂直图像与块中的另外 2 个垂直图像对齐

Question

我正在尝试对齐这 3 张图像，但我运行没有想法。蓝色和橙色图像在底部不对齐，默认容器宽度以及挤压浏览器时都会发生这种情况 window。

蓝色图像的原始尺寸为 925 x 1280，绿色和橙色图像为 1280 x 853。我的一个想法是图像分辨率本身就是一个问题，这可能吗？

它只是页面的一小部分，所以我不想使用网格，因为我认为它会打断整个响应机制。

.container {
    max-width: 1100px;
    margin: auto;
    overflow: hidden;
}
.images {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.right {
    width: 50%;
    float:right;

}
.right img {
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    display: block;
}
.left {
    box-sizing: border-box;
    width: 50%;
    padding: 10px;
    display: inline-block;
    float: left;
}

    <div class="container">
        <div class="images">
            <img src="blue.jpg" class="left">
            <div class="right">
                <img src="green.jpg">
                <img src="orange.jpg">
            </div>
        </div>
    </div>

Answer 1

请将所有 3 张图片合二为一 div 在 div 上使用，如下所示：

text-align : block;

Answer 2

你在避免使用 display:flex 吗？

<div class="container">
 <div id="bigimage"><img src="BIGIMAGE"></div>
 <div class="smallcontainer">
  <div id="smallleft"><img src="smallerleft"></div>
  <div id="smallright><img src="smallerright"></div>
  </div>
</div>

.container{
width: /*same width as big image*/;
}
#bigimage{
width:100%;
}
.smallcontainer{
width: /*same width as bigimage*/;
}
#smallleft{
width:50%;
}
#smallright{
width:50%;
}

像这样的东西？

另外，如果您想让底部的 2 个图像齐平，则必须设置它们的高度，但这会使它们缩放得很有趣。我会在 photoshop tbh 中调整大小。

Answer 3

你应该修复图像高度并制作：

右图高度 = 1/2 左图高度。

示例：

.images > img {
      height: 400px; // left image height;
    }
.right img {
      height: 200px; // tight images height;
    }

为了避免拉伸图像，您应该删除：width: 100% 从右图像并添加 width: auto 到左图像。

您最终会得到预期的结果，但由于图像的分辨率，图像之间的空间更大。

  .container {
        max-width: 1100px;
        margin: auto;
        overflow: hidden;
      }
      .images {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
      }
      .images > img {
        height: 400px;
        width: auto;
      }
      

      .right {
        width: 50%;
        float: right;
      }
      .right img {
        padding: 10px;
        box-sizing: border-box;
        display: block;
        height: 200px;
      }
      .left {
        box-sizing: border-box;
        width: 50%;
        padding: 10px;
        display: inline-block;
        float: left;
      }

<div class="container">
        <div class="images">
          <img src="http://ejad.solutions/cloud/left.jpg" class="left" />
          <div class="right">
            <img src="http://ejad.solutions/cloud/right1.jpg" />
            <img src="http://ejad.solutions/cloud/right2.jpg" />
          </div>
        </div>
      </div>

要删除左右之间的空格，编辑 .right 并使其成为：

   .right {
        width: 50%;
        float: left;
      }

Answer 4

为什么不尝试使用 Flex。

将容器显示更改为 Flex，将 Flex 方向更改为 Column，它应该可以工作...

如何将一个垂直图像与块中的另外 2 个垂直图像对齐

How to align one vertical image with another 2 vertical images in block

html

css

positioning

image