将 1 个大图像与 2 个小图像完美对齐，然后将其放入灵活的容器中

Question

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

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

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

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

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

Answer 1

Fiddle

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

您必须在小图像和大图像之间放置一个垂直分隔符，这样您就可以在 width: xx%;

中指定它们之间的 "fake" 边距

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

Answer 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;       
    }
}

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

Answer 3

感谢您的提问，我已经测试了一些解决方案，发现 @ 的答案是正确的，但代码放置不正确。我编辑了 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;       
}

将 1 个大图像与 2 个小图像完美对齐，然后将其放入灵活的容器中

Perfectly Align 1 large Image with 2 small ones next two it in a flexible container

html

css

image

alignment