Question

I’m trying to achieve something like this http://jsfiddle.net/Zex4S/1/ so when you resize the window, it image keeps its aspect ratio, but at the same time, I don’t want the height of this image to change, it must remain constant, and zoom in if necessary.

I think it involves cropping the top and left margin, but I can’t get it working

Something like this $this.css('margin-left', ($window.width() - this.width) / 2);

Any help would be greatly appreciated!

Answer 1

I assume you mean that you want the image to maintain it’s natural width & height but stay “centered” within it’s container if the window width is less than the image width.

You can do that using something like this:

var $img = $('img'),
    iw, ww;

$img.load(function() {
    iw = this.width; // save the natural width
});

$img.prop('complete') && $img.trigger('load'); // make sure load() is triggered

$(window).resize(function () {
    ww = $(this).width();
    if ( iw > ww ) { // if window width is less than image width, adjust margins
        $img.css('marginLeft', (iw-ww)/-2);
    }
}).trigger('resize');