CSS或Javascript：如何在寬度可變的容器中並排放置兩個肖像圖像？

Question

我有一個.container width:100%的靈活.container 。 我想將兩個肖像圖像（寬度可變）並排放入此`.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是flexible- 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 ，這是完成此工作所必需的！

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

Answer 3

只需在其上添加Float即可使它們脫離“常規流”，或者，如果頂部圖像和它們之間的文本始終保持不變，則您甚至可以使用絕對位置...

對於寬度：您也可以簡單地將其寬度設置為％，因此可以說使用偽類給前一個80％，第二個20％...

另一種可能性是您制作了不同的硬編碼CSS，可以在其中輕松定義要使用哪種CSS的頁面寬度，例如，如下所示：

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

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

對窗口大小的每一步等等。

希望對您有幫助：D