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

Question

我正在尝试对齐这 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>

Answer 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 中调整大小。