Nouvelle propriété CSS qui permet de gérer l'espacement dans les mises en page responsives.
Format
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
Le format est le plus souvent exprimé sous la forme de deux entiers et de deux-points, selon les dimensions suivantes: width:height ou x:y. Les formats les plus courants pour la photographie sont 4:3 et 3:2, tandis que la vidéo, et les appareils photo grand public plus récents, sont généralement au format 16:9.
<ph type="x-smartling-placeholder">![Deux images au même format. L'une mesure 634 x 951 pixels, tandis que l'autre mesure 200 x 300 pixels. Elles sont toutes les deux au format 2:3.](https://web.developers.google.cn/static/articles/aspect-ratio/image/two-images-the-same-aspe-c70cc7ed740f8.jpg?authuser=3&hl=fr)
Avec l'avènement du responsive design, il est devenu de plus en plus important de conserver le format développeurs Web, d'autant que les dimensions des images et les tailles des éléments changent en fonction l'espace de stockage.
Voici quelques exemples dans lesquels il est important de conserver les proportions:
- Créer des iFrames responsifs dont la hauteur correspond à 100% de la largeur d'un élément parent un ratio de fenêtre d'affichage spécifique
- Créer des conteneurs d'espaces réservés intrinsèques pour les images, les vidéos et les intégrations pour empêcher la remise en page lorsque les éléments se chargent et occupent de l'espace
- Création d'un espace uniforme et réactif pour les visualisations de données interactives ou les animations SVG
- Création d'un espace uniforme et réactif pour les composants multi-éléments, tels que les cartes ou les dates de calendrier
- Créer un espace réactif et uniforme pour plusieurs images de dimensions variables (peut être utilisé avec
object-fit
).
Ajustement des objets
La définition d'un format nous aide à dimensionner les contenus multimédias dans un contexte responsif. Un autre outil
est la propriété object-fit
, qui permet aux utilisateurs de décrire comment un objet (une image, par exemple)
dans un bloc doit remplir ce bloc:
![Visualisation de la démonstration d'ajustement des objets](https://web.developers.google.cn/static/articles/aspect-ratio/image/object-fit-demo-visualiza-6e1b75de8297c.jpg?authuser=3&hl=fr)
object-fit
. Regardez la démonstration sur Codepen.Les valeurs initial
et fill
ajustent l'image pour qu'elle occupe tout l'espace. Dans notre exemple, cela entraîne
l'image soit floutée, car les pixels sont ajustés. Pas idéal. object-fit: cover
utilisations
la plus petite dimension de l'image pour remplir l'espace et recadrer l'image pour l'adapter à cet espace
. Elle fait un "zoom avant" à sa limite la plus basse. object-fit: contain
garantit que l'intégralité de l'image
est toujours visible, donc à l'opposé de cover
, où elle prend la taille de la plus grande limite
(dans notre exemple ci-dessus, il s'agit de la largeur), et redimensionne l'image pour conserver ses proportions intrinsèques.
tout en s'adaptant à l'espace. Le cas object-fit: none
montre l'image recadrée en son centre.
(position par défaut de l'objet) à sa taille naturelle.
object-fit: cover
fonctionne dans la plupart des situations pour garantir une interface uniforme lors de la gestion
avec des images de dimensions variables, mais vous risquez de perdre des informations
ses bords les plus longs).
Si ces détails sont importants (par exemple, lorsque vous travaillez à plat sur une pose de produits de beauté), le recadrage de contenu important n'est pas autorisé. Le scénario idéal serait donc des images réactives de des tailles différentes pour s'adapter à l'espace de l'interface utilisateur sans recadrage.
Autre conseil: conserver le format avec padding-top
<ph type="x-smartling-placeholder">![Utilisation d'une marge intérieure supérieure pour définir un format 1:1 sur les images d'aperçu des posts dans un carrousel](https://web.developers.google.cn/static/articles/aspect-ratio/image/using-padding-top-set-1-9702b5487f14c.jpg?authuser=3&hl=fr)
padding-top
pour définir un format 1:1 sur les images d'aperçu des posts dans un carrouselAfin de les rendre plus réactives, nous pouvons utiliser le format. Cela nous permet de définir des proportions spécifiques et baser le reste du contenu sur un axe individuel (hauteur ou largeur).
Solution multinavigateur actuellement largement acceptée pour maintenir le format en fonction de la taille d'une image
est connu sous le nom de "Padding-Top Hack". Cette solution nécessite un conteneur parent
un conteneur enfant bien positionné. On calculerait ensuite le format
en pourcentage à définir
comme padding-top
. Exemple :
- Format 1:1 = 1 / 1 = 1 =
padding-top: 100%
- Format 4:3 = 3 / 4 = 0,75 =
padding-top: 75%
- Format 3:2 = 2 / 3 = 0,66666 =
padding-top: 66.67%
- Format 16:9 = 9 / 16 = 0,5625 =
padding-top: 56.25%
Maintenant que nous avons identifié la valeur du format, nous pouvons l'appliquer à notre conteneur parent. Prenons l'exemple suivant :
<div class="container">
<img class="media" src="..." alt="...">
</div>
Nous pouvons alors écrire le code CSS suivant:
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
Maintien des proportions avec aspect-ratio
<ph type="x-smartling-placeholder">![Utilisation des proportions pour définir un format 1:1 pour les images d'aperçu des posts dans un carrousel](https://web.developers.google.cn/static/articles/aspect-ratio/image/using-aspect-ratio-set-e58f152775151.jpg?authuser=3&hl=fr)
aspect-ratio
pour définir un format 1:1 sur les images d'aperçu des posts dans un carrouselMalheureusement, le calcul de ces valeurs padding-top
n'est pas très intuitif et nécessite quelques
des frais généraux et un positionnement supplémentaires. Avec le nouveau CSS intrinsèque aspect-ratio
, la langue utilisée pour conserver l'aspect
les rapports est
beaucoup plus claire.
Avec le même balisage, nous pouvons remplacer padding-top: 56.25%
par aspect-ratio: 16 / 9
, en définissant
aspect-ratio
selon un ratio spécifié de width
/ height
.
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
L'utilisation de aspect-ratio
au lieu de padding-top
est beaucoup plus claire et ne remanie pas la marge intérieure.
pour effectuer une action
en dehors de son champ d'application habituel.
Cette nouvelle propriété permet également
Définissez le format sur auto
, où "les éléments remplacés par un format intrinsèque utilisent ce format
ratio; sinon la boîte n'a aucun format préféré." Si auto
et <ratio>
sont tous les deux
spécifié ensemble, le format préféré est le format spécifié de width
divisé par height
, sauf si
il s'agit d'un élément remplacé par
un format intrinsèque, auquel cas ce format est utilisé à la place.
Exemple: cohérence dans une grille
Cela fonctionne très bien avec les mécanismes de mise en page CSS tels que la grille CSS et Flexbox. Envisagez d'utiliser une liste avec les enfants que vous souhaitez conserver au format 1:1, comme une grille d'icônes de soutien:
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
</li>
<li class="sponsor">
<img src="..." alt="..."/>
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
Exemple: Empêcher le décalage de mise en page
aspect-ratio
offre également une autre fonctionnalité très utile : il peut créer un espace d'espace réservé pour empêcher
Cumulative Layout Shift et améliorer les Web Vitals. Au cours de cette première
Par exemple, le chargement d'un élément à partir d'une API telle que Unsplash crée un
décalage de mise en page lorsque le chargement du contenu multimédia est terminé.
En revanche, l'utilisation de aspect-ratio
crée un espace réservé pour empêcher ce décalage de mise en page:
img {
width: 100%;
aspect-ratio: 8 / 6;
}
Astuce supplémentaire: attributs d'image pour le format
Vous pouvez également définir le format d'une image à l'aide d'attributs d'image. Si vous connaissez les dimensions de l'image à l'avance, il est recommandé de
définissez ces dimensions sur width
et height
.
Pour notre exemple ci-dessus, si les dimensions sont de 800 x 600 pixels, le balisage d'image ressemblerait à ceci: <img src="image.jpg"
alt="..." width="800" height="600">
. Si l'image envoyée présente le même aspect
mais pas nécessairement ces valeurs de pixels exactes, nous pourrions tout de même utiliser
pour définir le ratio, en l'associant au style width: 100%
afin de
que l'image occupe l'espace approprié. L'ensemble se présente comme suit:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Au final, l'effet revient à définir aspect-ratio
sur la
image via CSS, et le décalage de mise en page cumulatif est évité (voir la démonstration sur
Codepen).
Conclusion
Avec la nouvelle propriété CSS aspect-ratio
, lancée dans plusieurs navigateurs modernes, avec le maintien de
dans vos conteneurs de contenu multimédia et de mise en page devient un peu plus simple.
Photos d'Amy Shamblen et Lionel Gustave via Unsplash.