Comment - Format d'image
Apprenez à maintenir les proportions d'un élément avec CSS.
Ratio d'aspect
Créez des éléments flexibles qui conservent leur format d'image (4:3, 16:9, etc.) lorsqu'ils sont redimensionnés :
Qu'est-ce que le format d'image ?
Le rapport d'aspect d'un élément décrit la relation proportionnelle entre sa largeur et sa hauteur. Deux formats vidéo courants sont 4: 3 (le format vidéo universel du 20e siècle) et 16: 9 (universel pour la télévision HD et la télévision numérique européenne, et par défaut pour les vidéos YouTube).
Comment - Hauteur égale à largeur
Étape 1) Ajoutez du HTML :
Utilisez un élément conteneur, comme <div>, et si vous voulez du texte à l'intérieur, ajoutez un élément enfant :
Exemple
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Étape 2) Ajoutez CSS :
Ajoutez une valeur en pourcentage pour padding-top
maintenir le rapport hauteur/largeur du DIV. L'exemple suivant créera un rapport hauteur/largeur de 1:1 (la hauteur et la largeur sont toujours égales) :
Exemple de format d'image 1:1
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Autres formats d'image :
Exemple Format d'image 16:9
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Exemple 4:3 Format d'image
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Exemple 3:2 Format d'image
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Exemple Format d'image 8:5
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}