javascript - jQuery 宽度和高度返回旧值

Question

我正在努力将图像放在对象的正中间，使其看起来像 background-size: cover;。为此，我将宽度或高度(其中较小的一个)设置为 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)});
    }
});

http://jsfiddle.net/beb8o2g6/2/

谢谢!

Answer 1

你错过检查的东西太多了。

首先

您的 $(this); 包含一个元素数组，因为您的选择器是 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();

你不需要有这种条件，这确实让我很困惑。设置 width:100% 然后设置 height: auto 怎么样，因为您的容器的 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)});

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

要解决这个问题，您必须首先分别设置宽度和高度以进行计算

"margin-right": 0 - (i.width())/2, "margin-top": 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();

Fiddle

更新

由于设置较宽的图像 width 100% 会导致问题，让我们在 background:cover 上使用此逻辑

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

Fiddle