CSS或Javascript：如何将两个肖像图像并排放置在具有流体宽度的容器中？答案

【问题标题】：CSS or Javascript: How to fit two portrait images side by side in a container with fluid width?CSS或Javascript：如何将两个肖像图像并排放置在具有流体宽度的容器中？
【发布时间】：2013-02-14 04:45:33
【问题描述】：

我有一个灵活的.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 动态填充的，因此我无法对其进行硬编码。

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

【问题讨论】：

max-width: 100% 在图片上？
float: left 没解决你的问题？
如果您希望保持纵向图像并排显示，无论分辨率如何，除非您可以插入一个额外的标签来包含这些图像，否则 flexbox 对您没有帮助。很抱歉让您失望了：jsfiddle.net/HLPsw/1

标签： javascript css flexbox

【解决方案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，这是完成这项工作所必需的！

【讨论】：

谢谢，这个功能可能对我有用！但是我需要使它与“Zepto.js”而不是 jQuery 一起工作。任何想法为什么这不能与 Zepto 一起正常工作。我看不到 Zepto 不支持的任何方法！？
老实说，直到现在我才听说过 Zepto。一个快速的谷歌告诉我它是一种轻量级的 jquery 版本，并且快速查看 API 文档我认为我没有使用任何不受支持的功能。你为什么不试一试......
我只是尝试在 jsfiddle 上切换到 Zepto 框架，它似乎工作正常（在我的 iPad 上，无法在此处测试调整大小）
我快速浏览了一下，我能找到的一点点指向了 Zepto 中的错误方向。你肯定不是唯一一个遇到这个问题的人：stackoverflow.com/questions/9822589/… 无论如何，也许你应该考虑使用 jQuery，只要你从 ajax.googleapis.com 之类的东西加载它，大多数用户无论如何都会把它放在缓存中，所以大小应该不是问题，你也会支持可怜的IE用户

【解决方案2】：

你可以做这样的事情。

  <div class="container">
    <p>Some Text</p>
    <img src="this-is-a-landscape-image.jpg" alt="test"/>
    <p> Some Text again</p>
    <div class="portraits">
      <img style="float:left;" class="portait" src="this-is-a-portrait-image.jpg" alt="test"/>
      <img style="float:right;" class="portrait" src="this-is-a-portrait-image.jpg" alt="test"/>
    </div>
  </div>

【讨论】：

你应该让 .container overflow:hidden 随着内容的增长而增长。

【解决方案3】：

只需在它们上添加 Float 以便它们脱离“正常流程”，或者您甚至可以使用绝对位置，如果顶部图像和它们之间的文本始终保持不变...

对于宽度：您也可以简单地将它们的宽度设为 %，这样您就可以说给第一个 80% 和第二个 20% 使用伪类...

另一种可能性是您制作不同的硬编码 css，您可以在其中轻松定义要使用什么 css 的页面宽度，例如：

@media screen and (max-width: 400px) {
   .portrait:first {
       width: 85px;
   }

   .portrait:last {
       width: 105px;
   }
}

窗口大小的每一步等等。

希望对你有帮助：D

【讨论】：