0

我有一个 div，里面有不同大小的图像，它位于父容器内。

<div id="parentContainer">
<div id="boxToScale">
    <img src="http://placehold.it/350x150" />
    <img src="http://placehold.it/150x350" />
    <img src="http://placehold.it/200x200" />
    <img src="http://placehold.it/50x200" />
</div>
</div>

我需要缩放#boxToScale以使其适合内部#parentContainer（宽度和高度），而其中的所有图像都保持其纵横比。所有图像都应以相同的比例缩放，并保持在同一条线上。

这是一个显示设置的 jsfiddle：http: //jsfiddle.net/32sm4/

我发现很多东西可以按比例缩放单个图像，但不能按比例缩放一组图像。我事先不知道图像的大小是多少，只有#parentContainer.

Javascript/jquery 解决方案如果不能仅使用 css 就可以了。谢谢！

#boxToScale编辑：这是（大致）我希望它在缩放 后的样子：在此处输入图像描述

4

2 回答 2

1

在我看到你的照片后更新了我的答案，你的照片会是什么样子。

这是基于这个jsfiddle.net/7dpHK/2（charlietfl对你的问题发表了评论）。它几乎可以像您想要的那样工作，但是由于图像周围的那些 4px 边框/填充，它出现了问题。也有一些令人困惑的 CSS。所以你必须计算你的边界，如：

var border = $("#boxToScale img").length * 4;

然后从 中减去它parentW：

parentW = $box.width() - border

工作示例。

JS：

var border = $("#boxToScale img").length * 4; // 4px padding around every image
var $box = $('#boxToScale'),
    parentW = $box.width() - border,
    parentH = $box.height(),
    imageTotalW = 0,
    imageTotalH = 0,
    $imgs = $box.children();

$imgs.each(function () {
    var img = $(this),
        ht = img.height(),
        w = img.outerWidth()

    imageTotalW += w;
    img.data('w', w);

});

var img_width_ratio = parentW / imageTotalW;
$imgs.each(function (idx) {
    var $this = $(this),
        $prev = $this.prev();
    $this.width($this.outerWidth() * img_width_ratio);
});

演示

JS：

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = [maxWidth / srcWidth, maxHeight / srcHeight ];
    ratio = Math.min(ratio[0], ratio[1]);

    return { width:srcWidth*ratio, height:srcHeight*ratio };
}

imagesInContainer = $("#boxToScale img").length;

var toWidth = $("#parentContainer").width() / imagesInContainer;
var toHeight = $("#parentContainer").height() / imagesInContainer;

$("#boxToScale img").each(function(){
    var imageWidth = $(this).width();
    var imageHeight = $(this).height();
    var getRatio = calculateAspectRatioFit(imageWidth, imageHeight, toWidth, toHeight);
    $(this).width(getRatio.width);
    $(this).height(getRatio.height);
});

注意：图像中的 1px 边框可能会导致此代码出错。在此处查看无边界示例。

于 2013-10-27T01:08:10.783 回答
-1 
#boxToScale {
border: solid blue 1px;
white-space: nowrap;
}

#boxToScale img {
 width:20%;
 height:auto;
 display:inline-block;
 }

疯狂..但可能会工作...希望它有所帮助。

于 2013-10-27T00:49:01.517 回答