Javascript jquerywidth和height返回旧值

我正在将图像放置在物体的正中间，使其看起来像

背景尺寸：封面。为此，我将宽度或高度（其中较小者）设置为
100%
，另一个设置为
auto
。然后我将顶部和右侧设置为
50%
。最后，我尝试将边距（右侧和顶部）设置为高度和宽度的负一半

这是我的密码：

$.fn.extend({
    middleify: function(){
        var i = $(this);
        var f = i.parent();
        var wh = i.height() == i.width() ? f.width() < f.height() : i.width() > i.height();
        var hw = i.height() == i.width() ? f.height() < f.width() : i.height() > i.width();
        return i.css({position: "relative", "z-index": 2, width: hw ? "100%" : "auto", height: wh ? "100%" : "auto", top: "50%", right: "50%", "margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});
    }
});

$.fn.extend({
middleify:function（）{
var i=$（本）；
var f=i.parent（）；
var wh=i.height（）==i.width（）？f.width（）i.height（）；
var hw=i.height（）==i.width（）？f.height（）i.width（）；
返回i.css（{位置：“相对”，“z索引”：2，宽度：hw？“100%”：自动，高度：wh？“100%”：自动，顶部：“50%”，右侧：“50%”，右侧边距”：0-（i.width（））/2，“顶部边距”：0-（i.width（）/2）}）；
}
});


谢谢
 您只需使用CSS就可以做到这一点


图{
位置：相对位置；
溢出：隐藏；
高度：100px；
宽度：200px；
边框：1px纯黑；
}
图img{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
}

尝试
您错过检查的东西太多了

首先

您的<代码>$（此）包含元素数组，因为您的选择器是
img

$("img").middleify();

但您存储的值如下所示：

    var i = $(this);
    var f = i.parent();

秒

var wh = i.height() == i.width() ? f.width() < f.height() : i.width() > i.height();
var hw = i.height() == i.width() ? f.height() < f.width() : i.height() > i.width();

return i.css({position: "relative", "z-index": 2, width: hw ? "100%" : "auto", height: wh ? "100%" : "auto", top: "50%", right: "50%", "margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});

您正在计算尚未设置这些值的元素的
宽度
和
高度
。它更有可能获得默认值

要解决此问题，您必须首先分别为计算设置
宽度
和
高度

“页边距右侧”：0-（i.width（））/2，“页边距顶部”：0-（i.width（）/2）}

将它们放在一起

$.fn.extend({
  middleify: function(){
    var i = $(this);
    $.each(i, function(index, value) {
       var elm = $(value);
       var f = elm.parent();  
       elm.css({position: "relative", "z-index": 2, width: "100%", height:"auto", top: "50%", left: "50%"});

       elm.css({"margin-left": 0 - (elm.width()) / 2, "margin-top": 0 - (elm.height() / 2)}); 
    });
  }
});
$("img").middleify();


更新

由于设置较宽的图像
宽度
100%
会导致问题，因此让我们在

 
我很难理解你的最终目标是什么。@我想把图像放在矩形的中间，就像<代码>背景大小：封面；<代码>@Jack我添加了一个目标：为什么需要用javascript来实现这一点？知道为什么不能只使用背景大小可能会有助于想出一个不同的解决方案。这些图像是网站的重要组成部分，我在某个地方读到，谷歌机器人只能看到
img
对象中的图像，而不能看到背景图像中的图像。我无法将宽度设置为100%，因为如果高度小于宽度，则不会填充整个
图形。另外，如果我错了，请纠正我，但并非所有支持
translate
transform/translate
的浏览器都与
figure
具有相同的浏览器支持，因此如果您想使用
figure
您应该可以。如果是这样，那太好了！谢谢将宽度设置为100%时存在问题。我正在处理的一些图像如下所示：
$.fn.extend({
  middleify: function(){
    var i = $(this);
    $.each(i, function(index, value) {
       var elm = $(value);
       var f = elm.parent();  

        var imgWidth = elm.width();
        var imgHeight = elm.height();

        var containerWidth = f.width();
        var containerHeight = f.height();

        var imgRatio = (imgHeight / imgWidth);
        var containerRatio = (containerHeight / containerWidth);

        if (containerRatio > imgRatio) {
          var finalHeight = containerHeight;
          var finalWidth = (containerHeight / imgRatio);
        } 
        else {
          var finalWidth = containerWidth;
          var finalHeight = (containerWidth * imgRatio);
        }

       elm.css({position: "relative", "z-index": 2, width: finalWidth, height: finalHeight, top: "50%", left: "50%"});

       elm.css({"margin-left": 0 - (elm.width()) / 2, "margin-top": 0 - (elm.height() / 2)}); 
    });
  }
});
$("img").middleify();