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

【问题标题】：How to align one vertical image with another 2 vertical images in block如何将一个垂直图像与块中的另外 2 个垂直图像对齐
【发布时间】：2019-12-10 21:23:13
【问题描述】：

我正在尝试对齐这 3 个图像，但我已经没有想法了。蓝色和橙色图像在底部不对齐，它发生在默认容器宽度以及当您挤压浏览器窗口时。

蓝色图像的原始尺寸为 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>

【问题讨论】：

为什么你认为grid 会打断整个响应机制？？
好的，我已经想出了如何用网格做同样的事情，我对响应能力有误，它可以正常工作，但问题仍然存在。

标签： html css image positioning

【解决方案1】：

您是否避免使用 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 中调整大小。

【讨论】：

不完全是，我想要一个图像在左侧，宽度为给定区域 X 的 50% 和高度 100%，而在右侧我想要两个图像块，每个图像X 区域的 50% 宽度和 50% 高度

【解决方案2】：

请将3张图片全部放在一个div中，如下图所示：

text-align : block;

【讨论】：

它只会将所有图像放在一个块位置，我想要左侧一张图像，右侧垂直组合两张图像。

【解决方案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;
      }

【讨论】：

【解决方案4】：

为什么不尝试使用 Flex。

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

【讨论】：