jQuery将多个动态图像放在不同大小的容器中

Question

因此，我发现了类似的问题，但是没有一个问题可以回答我所有的问题，而且我知道必须对此有一个简单的jQuery答案。 我已经将多个图像动态地放置在自己的包含div的图像中，这些图像具有溢出：隐藏，它们需要填充其包含的div并居中（水平和垂直）。 包含的div也将具有不同的大小。

简而言之：

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

希望这张图片有助于解释我的追求。 单击此处查看图像。

我正在使用的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);
    }
});

我只是即时对其进行编码，并且没有进行任何广泛的测试，但是对于我扔给它的几个测试用例来说，它似乎工作得很好。 让我知道它是否无法正常工作。

Answer 2

这是我可以想到的最简单的解决方案：) JSFiddle上的完整示例。 http://jsfiddle.net/L3HhX/1/

$(document).ready(function() {
$('.center-trigger').click(function() {
    centerImageInTheContainers();
});

function centerImageInTheContainers() {
    $('.container').each(function(i, v) {
        var container = $(this);
        var myImg = $(this).find('img'); 
        myImg.css('top', calculatePosition(container.height(), myImg.height()));
        myImg.css('left', calculatePosition(container.width(), myImg.width()));
    });
}

function calculatePosition(containerSize, imageSize) {
    return 0 - ((imageSize - containerSize) / 2);
}

}）;

Answer 3

如果我正确理解，可以使用纯CSS完成此操作，前提是您1）可以使用背景图片代替<img>元素，并且2）不需要支持IE8及以下版本。

JSFiddle： http : //jsfiddle.net/6nKKX/

HTML：

<div class="imageHolder">
  <div class="first SlideImage"></div>
  <div class="second SlideImage"></div>
  <div class="third SlideImage"></div>
</div>

CSS ：（与解决方案有关的部分）

.imageHolder .SlideImage {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.imageHolder .first.SlideImage {
  background-image: url('...');
}
.imageHolder .second.SlideImage {
  background-image: url('...');
}
etc.

或者，您可以使用<div class="first SlideImage" style="background-image: url('...');"></div>在HTML中内联设置背景图像<div class="first SlideImage" style="background-image: url('...');"></div>

基本上， background-size: cover; 表示缩放图像，直到其覆盖整个框（裁剪其外部的所有内容），然后background-position: center center; 使图像居中。