1

我有一个灵活.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%。但是，我希望能够将两个图像（具有 class .portrait）并排放入此容器中。

在此处输入图像描述

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

纯css（也许是flexbox）有可能吗？还是一点JS？

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

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

4

3 回答 3

1

I don't think there is a fully dynamic solution in pure css (though I would love to be proven wrong!)

I wrote a quick jQuery solution here: http://jsfiddle.net/d2gSK/2/ You can play with the image sizes, the window size, and the width of the gutter, and your height should stay the same for both images, while the width is set to proportion.

The javascript looks like this:

    // 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);
        });
    });

I put the explanation inside the code. Feel free to ask if you want me to explain further.

Note that i put a wrapper around your images, and gave the images a display: block and a float:left, which is required to make this work!

于 2013-02-13T20:45:33.833 回答
0

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

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

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

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

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

对于窗口大小的每一步，依此类推。

我希望这会有所帮助：D

于 2013-02-13T20:18:08.277 回答
0

你可以做这样的事情。

  <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>
于 2013-02-13T19:36:42.900 回答