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

您计算width，哪些是你没有设置这些值尚未元素的height。它更有可能获得默认值。

为了解决这个问题，你必须设定width和height第一分开来计算

"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

更新

由于设置更宽的图像width100%会造成一个问题，让我们利用这个逻辑上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

Answer 2

你可以只用CSS这样做...

figure { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
figure img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
    width: 100%; 
 
}

<div class="left"> 
 
    <h1>The attempt</h1> 
 
    <figure> 
 
     <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/1601993_484655221639466_890925492_o.jpg" /> 
 
    </figure> 
 
    
 
    <figure> 
 
     <img src="https://scontent-fra.xx.fbcdn.net/hphotos-ash2/v/t1.0-9/580303_450139941757661_1330443402_n.jpg?oh=9ae59fa1b0e51a356b2ca50b0c160354&oe=55DDE28F" /> 
 
    </figure> 
 
    
 
    <figure> 
 
     <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1618538_487714631333525_1011288966_n.jpg?oh=2e48acfd68c08d2ea27fa3e7ba8e9462&oe=55B2A1C5&__gda__=1441110764_e04ce223b16035ae8c496e00f8845212" /> 
 
    </figure> 
 
</div>