Get XY Coords & Height/Width Of Div Background Image, When Using Background-size:contain

I'm designing a web page that has a photo for a background image of the main page. The image must cover as much of the available window size as possible, whilst maintaining the cor

Solution 1:

You could work this out with some quite simple comparative ratios, of the image width vs image height compared to container width vs container height. To work out whether the image will be scaled horizontally or vertically.

img_ratio = img_width / img_height;
container_ratio = $(elm).width() / $(elm).height();

Following that you can work out the offset quite simply as you can work out by what percentage the image has been scaled. And apply that to the opposite mesasurement, and compare it to the container.

if(container_ratio > img_ratio){
    //centered x height 100%
        var scale_percent = $(elm).height() / img_height;
        var scaled_width = img_width * scale_percent;
        var x_offset = ($(elm).width() - scaled_width) / 2;
        offset = [x_offset, 0];
}else{
    //centered y width 100%
        var scale_percent = $(elm).width() / img_width;
        var scaled_height = img_height * scale_percent;
        var y_offset = ($(elm).height() - scaled_height) / 2;
        offset = [0, y_offset];
}

I've wrapped this up in an example fiddle at: http://jsfiddle.net/y2LE4/

Solution 2:

I hope to help.

Try with:

$(document).ready(function(){

var something = background.offset();

 }

or

$(document).ready(function(){
      var something = $('.background').outerWidth(true);
}

Or just the width feature: http://api.jquery.com/width/