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 : 
]]></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:600px

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.


Libellés : Publié le lundi, mai 03, 2010
6 Commentaires

  1. Voilà un truc qui va bien me servir !
    Merci pour l'astuce

    RépondreSupprimer

  2. 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

    RépondreSupprimer

  3. 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

    RépondreSupprimer

  4. UNE ASTUCE QUI FAIT GAGNER UN TEMPS FOU!

    RépondreSupprimer

  5. C'EST BIZARRE! ÇÀ NE MARCHE PAS CHEZ MOI.... :-(
    LES IMAGES NE SONT PAS REDIMENSIONNÉES!

    RépondreSupprimer

  6. Merci pour cette astuce :-).
    Et pour les vidéos de youtube il y a une astuce ?

    RépondreSupprimer

Copyright 2015 Soufiane.fr