Javascript 调整大小并居中一个<；img>；在div内部并保持纵横比

我有一个固定大小为500x500的div。在这个div中，我有一个图像标签，可以是动态的。这意味着它可以有正方形、矩形（宽度>高度）或垂直矩形（高度>宽度）的大小。问题是我不希望这张图片被压扁，我想保持图片的纵横比。假设图像大小为1000x250，然后我希望它的大小调整为500x125，然后以这个500x500框为中心。如果大小为500x1000，则我们希望将其大小调整为250x500，然后在左右两侧以白色间距居中

有没有一种简单的方法可以使用纯css实现这一点，或者我需要javascript来实现这一点？怎么做

以下是我现在拥有的结构：

<div class="product-large" style="position: relative; overflow: hidden;"><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" alt=""><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" class="zoomImg" style="position: absolute; top: -236.43249427917618px; left: -188.05491990846681px; opacity: 0; width: 1024px; height: 714px; border: none; max-width: none;"></div>

我认为您可以：

 #conatiner {
    line-height:500px;
    height:500px;
    width:500px;
}
#img {
  max-width: 100%;
  max-height:100%;
  display: block;
  margin: 0 auto;
  vertical-align: middle;
}

这里的最小部分示例：

我没有做垂直对齐，但是你可以看到我的意思

我想你可以做：

 #conatiner {
    line-height:500px;
    height:500px;
    width:500px;
}
#img {
  max-width: 100%;
  max-height:100%;
  display: block;
  margin: 0 auto;
  vertical-align: middle;
}

这里的最小部分示例：

---

我没有进行垂直对齐，但您可以看到我的意思

针对垂直居中进行了更新-需要jQuery。

HTML

Javascript（jQuery）

---

新提琴：

为垂直居中更新-需要jQuery。

HTML

Javascript（jQuery）

---

<强>新小提琴：< /强>

如果你考虑使用jQuery，那么你可以看一下iMcCudio jQuery插件。

如果你考虑使用jQuery，那么你可以看一下iMcCurl jQuery插件。< /P>只需计算一下，看看图像的宽度或高度是否更小，然后将该属性设置为

100%

。溢出将被

.product large

隐藏。纵横比保持不变，因为相反的属性保持在

auto

@ahren您可以编写一个css来进行宽度或高度比较吗？不，您需要javascript来进行比较。如果是背景图像，您可以使用一个较新的背景属性为您自动缩放。请查看此处的解决方案。只需计算图像的宽度或高度是否较小，然后将该属性设置为

100%

。溢出将被

.product large

隐藏。纵横比保持不变，因为相反的属性保持在

auto

@ahren您可以编写一个css来进行宽度或高度比较吗？不，您需要javascript来进行比较。如果是背景图像，您可以使用一个较新的背景属性为您自动缩放。请查看此处的解决方案。

.product-large {
    width:500px;
    height:500px;
    border:1px red solid;
    position:relative;
}
.product-large img {
    max-width:500px;
    max-height:500px;
    width:auto;
    height:auto;
    position:absolute;
    top:50%;
    left:50%;
}

$(".product-large img").each(function () {
    //get height and width (unitless) and divide by 2
    var hWide = ($(this).width()) / 2; //half the image's width
    var hTall = ($(this).height()) / 2; //half the image's height, etc.

    // attach negative and pixel for CSS rule
    hWide = '-' + hWide + 'px';
    hTall = '-' + hTall + 'px';

    $(this).addClass("js-fix").css({
        "margin-left": hWide,
            "margin-top": hTall
    });
});