jQuery width and height return the old values

Question

I'm working on placing image in the exact middle of the object, to make it look like background-size: cover; . To do it, I've set the width or the height (the smaller among them) to 100% and the other one to auto . Then I've set the top and the right to 50% . At the end, I tried to set the margins (the right and the top) to minus half of the height and the width.

Here is my code:

$.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/

Thanks!

Answer 1

You can do this with just 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-ba.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-ga.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1618538_487714631333525_1011288966_n.jpg?oh=2e48acfd68c08d2ea27fa3e7ba8e9462&oe=55B2A1C5&__gda__=1441110764_e04ce223b16035ae8c496e00f8845212" /> </figure> </div> 

Answer 2

There are too many things you missed checking.

First

Your $(this); contains an array of elements because your selector is img

$("img").middleify();

Yet you are storing values like this :

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

Second

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

You don't need to have this kind of conditions, it really does confuse me. How about just setting the width:100% then height: auto since your container has bigger width than it's height.

Third

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

You are computing the width and height of the element which you haven't set those values yet. It's more likely it will get the default values.

To fix that you have to set the width and height first and separately to the computation

"margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});

Putting them together

$.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

Update

Since setting a wider image width 100% will cause a problem, let's make use of this logic on 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