Comment maintenir le ratio d'une DIV seulement en CSS

Attention ! Cet article a plus de 1 an (2760 jours), ce qui signifie qu'il n'est pas forcément à jour !

Pourquoi faire compliqué quand on peut faire simple. Je devais avoir une DIV avec une image en background. Je voulais que la DIV conserve son ratio sans que je lui oblige des dimensions. (Je voulais que l’image soit responsive) J’ai donc trouvé le moyen et le voici.

DÉMO

C’est tout simple, créez une DIV qui sera votre wrapper avec ce CSS

div {
  width: 100%;
  padding-bottom: 75%;
}

Le résultat va être une DIV avec une hauteur qui équivaut à 75% de la largeur de son conteneur, soit un ratio de 4:3.

Pour un ratio différent :

aspect ratio	Valeur du padding-bottom
16:9	56.25%
4:3	75%
3:2	66.66%

Pour avoir plus de ratio et de valeur du padding-bottom vous pouvez vous fiez à ce site et faire vos calculs : Aspect Ratio

Catégories :

HTML CSS