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>