Un reset responsive pour les images

Il est devenu assez fréquent d’employer max-width: 100% pour forcer le rapetissement des images lorsque la taille de fenêtre se réduit. Cependant, cela ne suffit pas toujours et j’ai récemment découvert une combinaison de trois propriétés très efficaces.

Le combo ultime ?

  • max-width: 100% -> pour limiter la taille à la largeur du parent,
  • height: auto -> pour conserver le ratio, même si un attribut height est précisé dans le code HTML,
  • width: auto -> pour corriger un bug sur IE8 (eh oui, ils sont partout !),
  • box-sizing: border-box -> pour limiter à 100% de la largeur, même si des paddings ou bordures sont appliquées à l’élément

La propriété CSS3 box-sizing, qui a le bon goût d’être compatible dès Internet Explorer 8, permet de modifier le calcul de largeur de boîte et d’y inclure les padding et margin.

Cette combinaison est très pratique pour tous les éléments nécessitant width ou max-width: 100% et susceptibles de bénéficier de se voir affubler de padding ou border : les tableaux, les google maps, les slideshows et autres champs de formulaires.

PS : sinon, si l’on n’y est pas forcé, width: 100% c’est le mal 😛