Note CSS : redimensionner une image (MAJ 2) -

#6694, par {lien_auteur}

Suite de ça : http://lehollandaisvolant.net/?mode=links&id=20130718133059

Par contre, centrer l’image verticalement n’est pas possible en CSS (à cause des positionnements absolues).

Il faut passer par JS, en ajoutant une marge en haut de l’image :.

Voilà comment :
image.style.marginTop = (Math.round((box_height - Math.min(img_height/Math.max(1, img_width/box_width), box_height))/2))+'px';

(avec img_height, img_width les vraies dimensions de l’image et box_width, box_height les dimensions de la boite (invariantes normalement)

Notez que ce bordel tient compte du redimensionnement CSS de l’image :

– si la hauteur calculée de l’image est plus petite que sa vrai hauteur, ça veut dire que l’image a été redimensionnée. Donc elle occupe toute la place verticalement, et donc sa marge est de (box-height − box_height = 0).
– si l’image est plus petite que le cadre, on applique la demie-différence entre la taille de l’image et celle du cadre.
– si l’image est redimensionnée horizontalement, ça se corse : la hauteur calculée est égale au ratio "taille réelle de l’image/taille horizontale du bloc" (un problème fait que je ne peux pas récupérer la taille de l’image en JS : le JS étant (je pense) prioritaire sur le CSS, ça merde, donc je fais comme ça).

http://lehollandaisvolant.net/?mode=links&id=20130718133059