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. coccxyphil4 mai 2010 à 08:32

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

    RépondreSupprimer
  2. mohamed bouslama5 mai 2010 à 02:29

    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. Elodie28 août 2010 à 11:46

    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. ALONEPRDZ.COM26 octobre 2010 à 22:28

    UNE ASTUCE QUI FAIT GAGNER UN TEMPS FOU!

    RépondreSupprimer
  5. ALONEPRDZ.COM26 octobre 2010 à 22:55

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

    RépondreSupprimer
  6. bjd97430 mars 2012 à 07:43

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

    RépondreSupprimer

Copyright 2015 Soufiane.fr