Arrondir des images sous différentes formats en CSS3

Dans ce tutoriel, nous allons passer en revue quelques techniques d’intégration pour arrondir les images. La principale propriété CSS que nous allons utiliser est le border-radius.

Bien qu’il soit assez simple pour appliquer la propriété sur des images carrées, sur les images rectangulaires il y a des taches supplémentaires nécessaires pour l’afficher correctement.

Les images carrées

images carrées

Un élément qui est parfaitement carré est totalement flexible car il ne nécessite qu’un petit bout de code CSS.

En attribuant une valeur 50% à la fois sur la largeur / hauteur de l’élément, on aura un arrondi parfait.

Les images rectangulaires

Pour arrondir des images rectangulaires ce sera un peu plus compliquer que les images carrés.

Pour contourner le problème, il faudra englober dans un <div> carré l’image rectangle tout en cachant ( overflow :hidden ) tout ce qui déborde.
La propriété css : Overflow :hidden est très importante dans cette partie là.

Mais deux points doivent être prise en compte sur la disposition de l’image rectangulaire :

  • disposition en paysage ( le rectangle est orienté horizontalement )
  • disposition en portrait ( le rectangle est orienté verticalement ).

Disposition en paysage de l’image

arrondir les images

Le width et le height de l’enveloppe doivent être identique pour avoir un carré.
Dans notre exemple ce sera le div .circular—landscape

Et aussi il devra être inferieure ou égale à l’hauteur de l’image. Cela permettra de garantir que l’élément va englober l’ensemble de l’image.

En général, l’image devrait être centré mais pas obligatoirement , à cause de cela on aura besoin de l’ajuster suivant notre besoin à l’aide d’un margin négative sur l’élément parent, par exemple on a pris « margin-left :-50px » mais cela dépendra de l’image que vous allez utiliser.

Disposition en portrait de l’image

arrondir les images

Répondre