nov.
9
2015
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.
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