Voici une petite classe MooTools qui permet de retailler une image en fonction de son container (taille dynamique ou pas) tout en conservant le ratio largeur*hauteur de l'image. 

var Resize = new Class({
    initialize: function(){
        this.visuals = $$('.sls_resize_container .sls_resize_visual');

        if (this.visuals.length > 0)
            this.prepareVisuals(this.visuals);

        window.addEvents({
            'resize': this.fitAll.bind(this),
            'load': this.fitAll.bind(this)
        });

        this.fitAll();
    },

    prepareVisuals: function(visuals){
        visuals.each(function(visual){
        var wrapper = visual.getParent('.sls_resize_container');
        wrapper.setStyles({'position' : 'relative', 'overflow' : 'hidden'});
            visual.store('wrapper', wrapper);
            visual.set('morph', {duration:200});
            visual.setStyles({'position':'relative'});
        });
    visuals.addClass('sls_resize_added');
    },

    fitAll: function(){
        var newVisuals = $$('.sls_resize_container .sls_resize_visual:not(.sls_resize_added)');
        if (newVisuals.length > 0){
            this.prepareVisuals(newVisuals);
            this.visuals.append(newVisuals);
        }

        this.visuals.each(function(visual){
            this.fit(visual);
        }.bind(this));
    },

    fit: function(visual){
        var wrapper = visual.retrieve('wrapper');
        var wrapperWidth = wrapper.getDimensions().width;
        var wrapperHeight = wrapper.getDimensions().height;

        var width = visual.width;
        var height = visual.height;
        var top, left, nwidth, nheight;

        if (visual.hasClass('sls_resize_visual_width')){
            top = 0;
            left = 0;
            nwidth = wrapperWidth;
            nheight = (height*nwidth)/width;

            if (nheight < wrapperHeight){
                visual.removeClass('sls_resize_visual_width');
                this.fit(visual);
                return;
            }
        } else {
            if (width == 0 || height == 0)
                return;
            nwidth = wrapperWidth;
            nheight = (height*nwidth)/width;
            top = (wrapperHeight-nheight)/2;
            left = 0
            if (top <= 0 )
                left = 0;
            else {
                top = 0;
                nheight = wrapperHeight;
                nwidth = (nheight*width)/height;
                left = (wrapperWidth-nwidth)/2;
            }
        }

        if (visual.tagName == 'IFRAME')
            visual.setStyles({'width' : wrapperWidth, 'height' : wrapperHeight, 'top' : 0, 'left' : 0});
        else if (visual.hasClass('sls_resize_no_bigger') && (nwidth > width || nheight > height))
            visual.setStyles({'width' : width, 'height' : height, 'top' : 0, 'left' : 0});
        else
            visual.setStyles({'width' : nwidth, 'height' : nheight, 'top' : top, 'left' : left});
    }
});

window.addEvent('load', function(){
    if ($$('.sls_resize_container').length > 0)
        new Resize();
});

Il suffit d'affecter les classes suivantes aux éléments:

• sls_resize_container : élément qui contient l'image
• sls_resize_visual : image

Afin d'avoir une parfaite compatibilité cross-browser, il est conseillé d'indiquer dans la balise image les dimensions (largeur/hauteur) originales de l'image dans le HTML:

<div class="box box1 sls_resize_container">
<img src="img/1.png" class="sls_resize_visual" title="" alt="" width="705" height="397" />
</div>

L'image sera toujours centrée en largeur et en hauteur. Si l'un des côté dépasse, les extrémités seront cachées par l'overflow:hidden pour conserver le centrage.