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

我刚刚编写了这个代码，并没有进行任何广泛的测试，但它似乎对我抛出的几个测试用例工作正常。如果它不适合你，请告诉我。

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中内嵌设置背景图片

基本上，background-size: cover;表示缩放图片，直到它覆盖整个框（裁剪其外部的任何内容），并background-position: center center;为您居中图像。

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

3 个答案: