javascript - CSS 或 Javascript : How to fit two portrait images side by side in a container with fluid width?

Question

我有一个灵活的 .container，width:100%。我想将两个肖像图像(宽度不同)并排放入这个`.container``

<div class="container">
       <p>Some Text</p>
       <img src="this-is-a-landscape-image.jpg" alt="test"/>
       <p> Some Text again</p>
       <img class="portait" src="this-is-a-portrait-image.jpg" alt="test"/>
       <img class="portrait" src="this-is-a-portrait-image.jpg" alt="test"/>
</div>

我遇到的问题:我正在开发一个响应式布局，其中此 .container 是灵活的 - width:100%。但是，我希望能够将两个图像(具有 .portrait 类)并排放入此容器中。

正如您在这个示例图像中看到的，两个 .portrait 图像不一定具有相同的宽度？我希望它们的高度相同，但宽度应该是动态的(如果它们的比例不同)

用纯 css(也许是 flexbox)这在某种程度上是可能的吗？还是一点点JS？

内容是通过 CMS 动态填充的，所以这就是我不能对其进行硬编码的原因。

有什么创意或有用的想法吗？

Answer 1

我不认为在纯 css 中有一个完全动态的解决方案(尽管我很想被证明是错误的!)

我在这里写了一个快速的 jQuery 解决方案:http://jsfiddle.net/d2gSK/2/您可以调整图片大小、窗口大小和装订线宽度，两张图片的高度应保持相同，而宽度应按比例设置。

JavaScript 看起来像这样:

    // put it in a function so you can easily reuse it elsewhere
    function fitImages(img1, img2, gutter) {
        // turn your images into jQuery objects (so we can use .width() )
        var $img1 = $(img1);
        var $img2 = $(img2);
        // calculate the aspect ratio to maintain proportions
        var ratio1 = $img1.width() / $img1.height();
        var ratio2 = $img2.width() / $img2.height();
        // get the target width of the two images combined, taking the gutter into account
        var targetWidth = $img1.parent().width() - gutter;

        // calculate the new width of each image
        var width1 = targetWidth / (ratio1+ratio2) * ratio1;
        var width2 = targetWidth / (ratio1+ratio2) * ratio2;

        // set width, and height in proportion
        $img1.width(width1);
        $img1.height(width1 / ratio1);
        $img2.width(width2);
        $img2.height(width2 / ratio2);

        // add the gutter
        $img1.css('paddingRight', gutter + 'px');

    }

    //when the DOM is ready
    $(document).ready(function() {
        // cache the image container
        var $wrapper = $('.portrait-wrapper');
        // set the image sizes on load
        fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);

        // recalculate the image sizes on resize of the window
        $(window).resize(function() {
            fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);
        });
    });

我把解释放在代码里面了。随时询问是否需要我进一步解释。

请注意，我在您的图像周围放置了一个包装器，并为图像提供了一个 display: block 和一个 float:left，这是完成这项工作所必需的!