将 1 个大图像与 2 个小图像完美对齐，然后将两个小图像放在一个灵活的容器中答案

【问题标题】：Perfectly Align 1 large Image with 2 small ones next two it in a flexible container将 1 个大图像与 2 个小图像完美对齐，然后将两个小图像放在一个灵活的容器中
【发布时间】：2015-06-21 12:15:19
【问题描述】：

我想实现一个包含三个图像的灵活容器。一个大的在左边，两个较小的（大约四分之一大小）在它的右边对齐：

在调整浏览器窗口大小时，我希望三个图像在保持原始比例的同时进行相应调整，以便大图像的基线与下方小图像的基线对齐。

到目前为止，我已经尝试了以下代码：

<div id="space">
    <div id="large">
        <img src="http://placehold.it/640x420" />
    </div>
    <div class="small">
        <img src="http://placehold.it/320x200" />
    </div>
    <div class="small">
        <img src="http://placehold.it/320x200" />
    </div>
</div>


#space {
    width:100%;
}
#large {
    width:60%;
    float:left;
    margin:1% 1%;
    padding:0px;
}
.small {
    width:30%;        
    float:left;
    margin:1% 1%;
    padding:0px;
}
img {
    width:100%;
    height:auto;
    padding:0px;
    margin:0px;
}

如果图像略高于允许的比例，则图像应在相应容器中垂直居中，应隐藏溢出。

您可以在 JSFIDDLE 上找到此代码：https://jsfiddle.net/u8kksgbq/12/

请帮忙 - 我一直在尝试并没有找到解决方案。

【问题讨论】：

您可能希望了解大量等高列解决方案并在列内使用绝对定位。

标签： html css image alignment

【解决方案1】：

感谢您的提问，我已经测试了一些解决方案，发现 @ 的答案是正确的，但代码放置不正确。我已将 CSS 编辑如下：

#contact-pics {
    overflow: auto;
}

#contact-pics img {
        width: 100%;
        height: auto;
}

.pic-large {
        display: inline-block;
        position: relative;
        width: 65.99%;
        float:right;
}
.pic-large .dummy {
            padding-top: 62%;
}

.pic-small {
        display: inline-block;
        position: relative;
        width: 32.8%;
        float:right;
}
.pic-small .dummy {
            padding-top: 62%;
}

.v-spacer {
        display: inline-block;
        position: relative;
        width: 1.2%;
        float:right;
}

.v-spacer .dummy {
        padding-top: 2535%;
}

.h-spacer {
        display: inline-block;
        position: relative;
        width: 32.333333%;
        float:right;
}

.h-spacer .dummy {
        padding-top: 2.4%;
}

.pic-content {
        position: absolute;
        /*top: 0;*/
        bottom: 0;
        left: 0;
        right: 0;       
}

【讨论】：

【解决方案2】：

感谢您的回答。这是我的最终解决方案：

<section id="contact-pics">
    <div class="pic-large">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>

    <div class="v-spacer">
        <div class="dummy"></div>
        <div class="pic-content">
        </div>
    </div>

    <div class="pic-small">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>

    <div class="h-spacer">
        <div class="dummy"></div>
        <div class="pic-content">
        </div>
    </div>

    <div class="pic-small">
        <div class="dummy"></div>
        <div class="pic-content">
            <img src="http://192.168.178.20"/>
        </div>
    </div>  
</section>

还有 CSS：

#contact-pics {

    img {
        width: 100%;
        height: auto;
    }

    overflow: auto;

    .pic-large {
        display: inline-block;
        position: relative;
        width: 65.99%;
        float:left;

        .dummy {
            padding-top: 62%;
        }
    }

    .pic-small {
        display: inline-block;
        position: relative;
        width: 32.8%;
        float:left;

        .dummy {
            padding-top: 62%;
        }
    }

    .v-spacer {
        display: inline-block;
        position: relative;
        width: 1.2%;
        float:left;

        .dummy {
            padding-top: 2535%;
        }
    }

    .h-spacer {
        display: inline-block;
        position: relative;
        width: 32.333333%;
        float:left;

        .dummy {
            padding-top: 2.4%;
        }
    }

    .pic-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;       
    }
}

猜猜有更简单的解决方案，但这一个绝对有效:-)

【讨论】：

【解决方案3】：

Fiddle

我不知道答案有多大，但我试了一下。

您必须在小图像和大图像之间放置一个垂直分隔符，这样您就可以在width: xx%; 中指定它们之间的“假”边距

至于水平分隔符，我试过了，但没有得到。我能看到的唯一解决方案是创建一个透明图像并放在它们之间。设置它的width: 30%，就像照片一样，这样它也会保留height: auto。

【讨论】：