# 022: Images Flexy (Figures et légendes) - Astuces CSS

Anonim

Avant de faire un travail de typographie, j'ai pensé que nous corrigerions la chose ennuyeuse où les images éclatent en dehors de la zone d'article et de la grille. En utilisant quelques règles CSS simples pour remplacer les attributs et le style d'image en ligne, nous pouvons écraser les images pour qu'elles tiennent dans notre article à la taille correcte.

Ecraser des images comme celle-ci n'était pas très cool car les navigateurs faisaient un mauvais travail de redimensionnement, mais ce n'est plus le cas. C'est en fait une bonne idée car les écrans obtiennent une résolution plus élevée, car les images seront plus nettes.

Le redimensionnement est essentiellement traité par:

figure img ( max-width: 100%; height: auto !important; )

Nous stylisons un peu les chiffres et les légendes pour les faire ressembler, vous savez, à une bonne figure dans un article de blog.