Javascript jQuery center在不同大小的容器中显示多个动态图像

所以我发现了类似的问题，但没有一个能回答我所有的问题，我知道一定有一个简单的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>

如果这不合理，问我什么，

---

提前感谢

我可以想出一个最简单的解决方案：） JSFIDLE上的完整工作示例。

---

}))

如果我理解正确，这可以通过纯CSS实现，前提是1）可以使用背景图像而不是

元素，2）不需要支持IE8及以下版本

JSFiddle：

HTML:

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

或者，您可以使用

---

基本上，

背景尺寸：封面

表示缩放图像直到覆盖整个框（裁剪框外的任何对象），并且

背景位置：居中将图像居中。
这里有一个JQuery替代我的CSS解决方案：

JSFiddle：

$（“.SlideImage”）。每个（函数（）{
变量容器=$（此），
img=$（this）.find（“img”），
边缘
if（img.width（）/container.width（）

我只是动态地编写了代码，没有做过任何广泛的测试，但是对于我抛出的几个测试用例来说，它似乎工作得很好。如果它对您不起作用，请告诉我。
嘿@Alexus这很好，但有一件事。。。它不会按比例调整大小以适应包含框，如果您可以使用JSFIDLE也这样做，那么这将是完美的！谢谢你的帮助。我刚刚意识到我在问题中没有说得太清楚，对此表示抱歉。你调整容纳框的大小以使其符合比例是什么意思？我们是在调整方框还是图像的大小？是的，很抱歉，我的意思是图像没有按比例调整大小以适应包含的div。我想调整图像的大小。对不起，亚历克斯，我的意思是调整图像的大小。点击查看我的意思。嘿@James不幸的是，我不能将其作为背景图像放在div中，因为这些图像是动态进入页面的，否则我会这样做。感谢您的评论。您可以将其作为背景图像放置-只需使用以下代码：$（'.class of the container'）.css（'background'，'/image/url/go/here'）；这也不行@Alexus，因为图像的url会根据图像的来源而变化，我也会失去alt标记的功能。。。我喜欢你的第一个方法，因为它实现了我所追求的一切。你是一个传奇，在我尝试过的测试中效果很好。谢谢你。
$(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);
}

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

.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.

$(".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);
    }
});