Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Astuces CSS : des images rondes

Afficher des images rondes (solution 1).

La première possibilité pour afficher des images rondes est d'utiliser les angles arrondis avec la propriété border-radius. En fixant le rayon à 50%, on obtient un cercle parfait.

L'exemple est construit avec des images initialement rectangulaires ; les CSS les affichent ovales. Avec des images carrées, on obtiendrait des cercles.

Ces images sont de Sacha Goldberger

Photos rondes en CSS   Photos rondes en CSS   Photos rondes en CSS

Afficher des images rondes (solution 2).

Une autre solution pour afficher des images rondes est de faire appel à la propriété clip-path, qui est plus ou moins faite pour ça : elle permet de n'afficher qu'une partie d'un élément, cette partie étant délimitée par un polygone ou un cercle. Cette deuxième solution offre plusieurs avantages :

  • Possibilité de choisir la forme affichée, quelque soit le ratio (rapport entre largeur et hauteur) original de l'image.
  • Possibilité de choisir le rayon et de décentrer le cercle pour afficher une partie quelconque de l'image.
  • Possibilité d'afficher les images avec des formes différentes : rectangle, cercle, polygones, etc.

Exemple avec clip-path   Exemple avec clip-path   Exemple avec clip-path