Redimensionner automatiquement vos images avec Max-Width
Voici une toute petite astuce CSS qui peut vraiment vous simplifier la vie. Cette astuce va vous permettre de définir une largeur maximale pour vos images et les redimensionner automatiquement si elles dépassent cette valeur.
Avec la propriété CSS max-width vous définissez une largeur maximale et si une image est plus grande que cette valeur, elle sera automatiquement redimensionné.
La hauteur de l'image sera calculée automatiquement, ce qui signifie que votre image ne sera pas déformée.
Pour appliquer l'astuce, allez dans "Mise en page", "Modifier le code HTML" et recherchez ce code :
Sans l'astuce:
avec l'astuce:
Bien sûr ce code CSS est compatible avec tous les navigateurs : Internet Explorer (7-8), Opera, Safari, Chrome, et Firefox.
Avec la propriété CSS max-width vous définissez une largeur maximale et si une image est plus grande que cette valeur, elle sera automatiquement redimensionné.
La hauteur de l'image sera calculée automatiquement, ce qui signifie que votre image ne sera pas déformée.
Pour appliquer l'astuce, allez dans "Mise en page", "Modifier le code HTML" et recherchez ce code :
]]></b:skin>Juste au dessus, ajoutez cette ligne :
.post img {max-width:500px;}Voilà, vous venez de définir une largeur maximale pour toutes les images présentes dans les articles ....
Exemple
Avec une image qui fait 986×535px et avec un Max-width:600pxSans l'astuce:
Voilà un truc qui va bien me servir !
Merci pour l'astuce
wé c super bien soufiane tu es le meilleur jaime bien cet astuse
soufiane j'ai un grand probleme au niveau d'affichage de mon blog si je me connecte par IE ,avec firfox pas de probleme ,est ce que vous pouver m'aider;
j'ai besoin de tes connaissances et ta experiance dans ce domaine.
j'espere que vous me repondre par e-mail svp soufiane "3awan khouk"
mon blog:
http://production-couches-bebe.blogspot.com/
E-mail:
camelion20051@hotmail.com
et merci infiniment
j'adore cette astuce mais moi, ça me coupe juste mon image sur les côtés et laisse la hauteur à l'identique. : ( Si tu sais comment je peux arranger ça, sachant que j'ai créer mon blog pour y exposer mes photos, j'aimerai qu'elles ne soient pas modifier. Merci. xx
UNE ASTUCE QUI FAIT GAGNER UN TEMPS FOU!
C'EST BIZARRE! ÇÀ NE MARCHE PAS CHEZ MOI.... :-(
LES IMAGES NE SONT PAS REDIMENSIONNÉES!