Le Hollandais Volant#6694 - Note CSS : redimensionner une image (MAJ 2) -
http://lehollandaisvolant.net/?mode=links&id=20130718133059
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).
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).