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.