我有一个灵活的 .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 动态填充的,所以这就是我不能对其进行硬编码的原因。
有什么创意或有用的想法吗?
最佳答案
我不认为在纯 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
,这是完成这项工作所必需的!
关于javascript - CSS 或 Javascript : How to fit two portrait images side by side in a container with fluid width?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14861514/