javascript - jQuery 在不同大小的容器中居中多个动态图像

Question

所以我发现了类似的问题，但没有一个能回答我的所有问题，而且我知道必须有一个简单的 jQuery 答案。我有多个图像被动态放置在它们自己的包含溢出的 div 中:隐藏，它们需要填充它们包含的 div 并居中(水平和垂直)。包含的 div 也会有不同的大小。

简而言之:

• 多个不同大小的图像填充并居中包含 div。
• 包含的 div 大小不同。
• 将在页面上多次使用。
• 图片按比例填充框

希望这张图片能帮助解释我所追求的。 点击here查看图像。

我正在使用但可以更改的 HTML

<div class="imageHolder">
    <div class="first SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="second SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="third SlideImage">
        <img src="..." alt="..."/>
    </div>
</div>

和 CSS

.imageHandler{
    float:left;
    width:764px;
    height:70px;
    margin:1px 0px 0px;
}
.imageHolder .SlideImage{
    float:left;
    position:relative;
    overflow:hidden;
}
.imageHolder .SlideImage img{
    position:absolute;
}
.imageHolder .first.SlideImage{
    width:381px;
    height:339px;
    margin-right:1px;
}
.imageHolder .second.SlideImage{margin-bottom:1px;}
.imageHolder .second.SlideImage, .imageHolder .third.SlideImage {
    width: 382px;
    height: 169px;
}

如果这没有意义，请问我任何问题， 提前致谢

Answer 1

这是我的 CSS 解决方案的 JQuery 替代方案:

JSFiddle:http://jsfiddle.net/yczPs/

$(".SlideImage").each(function () {
    var container = $(this),
        img = $(this).find("img"),
        margin;
    if (img.width() / container.width() < img.height() / container.height()) {
        img.css("width", container.width());
        margin = -(img.height() * img.width() / container.width() - container.height()) / 2;
        img.css("margin-top", margin);
    } else {
        img.css("height", container.height());
        margin = -(img.width() * img.height() / container.height() - container.width()) / 2;
        img.css("margin-left", margin);
    }
});

我只是即时编写代码，并没有进行任何广泛的测试，但它似乎在我投入的几个测试用例中运行良好。如果它不适合您，请告诉我。