CSS aspect-ratio et object-fit, avec sélecteur de point focal
Guide CSS aspect-ratio et object-fit
CSS aspect-ratio et object-fit : démos en direct et Tailwind | We.Inc
Fixez les proportions d'une boîte avec aspect-ratio, puis ajustez les photos à l'intérieur avec object-fit cover, contain, fill, none ou scale-down. Cliquez pour définir un point focal avec object-position.
Deux propriétés résolvent la plupart des problèmes de dimensionnement d'images. aspect-ratio: 16 / 9 fait garder cette forme à une boîte quelle que soit sa largeur, en remplaçant l'ancienne astuce du padding-top. object-fit décide comment un img ou une vidéo remplit cette boîte : cover recadre, contain ajoute des bandes, fill étire. object-position choisit la partie qui reste visible quand cover recadre.
Aide-mémoire
Objectif
CSS
Tailwind
Boîte carrée
aspect-ratio: 1
Format vidéo
aspect-ratio: 16 / 9
N'importe quel ratio
aspect-ratio: 4 / 3
aspect-4/3 ou aspect-[4/3]
Remplir et recadrer
object-fit: cover
Tout afficher
object-fit: contain
Garder le haut
object-position: top
Ci-dessous, une image de test est placée dans une boîte dont vous pouvez changer la forme. Passez d'une valeur object-fit à l'autre parmi les cinq, cliquez sur l'image pour déplacer le point focal, puis copiez le CSS ou les classes Tailwind. Plus bas : l'astuce du padding à côté d'aspect-ratio, les vidéos intégrées responsive et les grilles de cartes aux miniatures uniformes.
Choisissez un ratio de boîte et une valeur object-fit. L'aperçu montre exactement ce que le navigateur va recadrer ou étirer.
Avec cover ou none sélectionné, cliquez n'importe où sur l'image de test pour placer object-position à cet endroit.
Copiez le CSS généré, ou les classes Tailwind qui font la même chose.
Utilisez les recettes de grille de cartes et de vidéo ci-dessous quand vous construisez de vraies mises en page.
Mettez toujours les attributs width et height sur les balises img. Les navigateurs les convertissent en ratio avant le chargement du fichier, donc la mise en page ne saute pas.
Choisissez cover pour les miniatures et les photos d'en-tête, contain pour les logos et les photos de produits où rien ne doit être coupé.
Si un visage est sans cesse coupé, déplacez object-position vers lui au lieu de recadrer le fichier image.
aspect-ratio est une forme préférée, pas une cage. Un long texte dans la boîte la rend plus haute, sauf si vous définissez min-height: 0 ou overflow.
Questions fréquentes
Quelle est la différence entre aspect-ratio et object-fit ?
aspect-ratio donne sa forme à la boîte elle-même, pour n'importe quel élément. object-fit ne s'applique qu'au contenu remplacé comme img, video et canvas, et décide comment ce contenu est dessiné dans sa boîte. On utilise généralement les deux : aspect-ratio sur l'image pour fixer sa forme, object-fit: cover pour que la photo la remplisse.
Pourquoi object-fit ne fait-il rien ?
La boîte de l'image a le même ratio que la photo, donc il n'y a rien à recadrer ni à étirer. object-fit ne montre une différence que lorsque la boîte a une autre forme, par exemple une hauteur fixe avec width: 100%, ou un aspect-ratio différent de celui du fichier.
Ai-je encore besoin de l'astuce du padding-top ?
Pas pour les navigateurs actuels. aspect-ratio fonctionne dans Chrome, Edge, Firefox et Safari depuis 2021. Ne gardez l'astuce que si vous devez prendre en charge d'anciens navigateurs, et vérifiez caniuse pour votre audience.
object-fit fonctionne-t-il sur les images d'arrière-plan ?
Non. Pour les arrière-plans CSS, les équivalents sont background-size: cover ou contain, et background-position pour le point focal. object-fit sert aux vrais éléments img et video, qui conviennent mieux aux images de contenu car ils portent un texte alt et prennent en charge srcset.
Peut-on utiliser aspect-ratio sur une div ?
Oui. N'importe quel élément l'accepte. Une div avec width: 100% et aspect-ratio: 1 devient un carré qui grandit avec sa colonne, pratique pour les emplacements de carte, les avatars et les skeleton loaders.
Comment le navigateur applique aspect-ratio
Le ratio n'intervient que lorsqu'une dimension est automatique. Définissez une largeur et laissez la hauteur à auto, et le navigateur calcule la hauteur à partir du ratio. Définissez à la fois la largeur et la hauteur et le ratio est ignoré, puisqu'il ne reste rien à calculer.
La valeur auto 3 / 2 signifie : utiliser le ratio naturel de l'élément quand il en a un, comme une image chargée, et se rabattre sur 3 / 2 avant son chargement ou quand il n'en a pas. C'est exactement ainsi que se comportent en coulisses les attributs width et height sur img.
Choisir un point focal
object-position accepte les mêmes valeurs que background-position : des mots-clés comme top ou right, des pourcentages ou des longueurs. 50% 50% est la valeur par défaut et conserve le centre. Un pourcentage aligne ce point de l'image sur le même point de la boîte, donc 30% 40% conserve la zone située à un tiers depuis la gauche et un peu au-dessus du milieu.
Pour un système de contenu, enregistrez le point focal de chaque image sous forme de deux pourcentages et écrivez-le dans un style en ligne. Chaque recadrage du site garde alors le sujet dans le cadre, quel que soit le ratio utilisé par la mise en page.
aspect-ratio à côté de l'astuce du padding
Avant aspect-ratio, une boîte obtenait sa forme grâce à un padding-top en pourcentage, car les pourcentages de padding vertical sont calculés par rapport à la largeur. Cela fonctionne, mais le contenu doit être positionné en absolu à l'intérieur. Les deux boîtes ci-dessous sont en 16:9.
Ancien et nouveau, même résultat
56.25% correspond à 9 divisé par 16. La version moderne tient en une ligne et laisse le contenu s'écouler normalement.
Les cinq valeurs d'object-fit sur la même photo
La photo est en 3:2 et chaque boîte est carrée, donc chaque valeur doit gérer un écart de proportions et les différences sont bien visibles.
Valeurs d'object-fit
Valeur
Ce qui se passe
Tailwind
Étire l'image aux dimensions de la boîte. Valeur par défaut pour img et video. Déforme quand les ratios diffèrent.
Met toute l'image à l'échelle pour qu'elle tienne dans la boîte. Laisse des bandes vides (letterboxing) quand les ratios diffèrent.
Met l'image à l'échelle pour remplir la boîte et recadre le débordement. Aucune déformation, aucune bande, une partie de l'image est coupée.
Garde l'image à sa taille naturelle et recadre tout ce qui ne tient pas. Idéal pour montrer un détail à l'échelle 1:1.
Se comporte comme none ou contain, selon celui qui donne le résultat le plus petit. N'agrandit jamais une petite image.
fill, contain, cover, none, scale-down
La même photo de 300 par 200 dans cinq carrés de 110 pixels. Observez le point rouge : c'est le sujet que cover ne doit pas perdre.
Vidéos et intégrations responsive
Une iframe façon YouTube qui garde le 16:9
Donnez à l'iframe une largeur de 100% et un aspect-ratio. Pas besoin de div englobante ni de positionnement absolu.
Grilles de cartes aux miniatures uniformes
Toutes les miniatures ont la même forme
Les images envoyées arrivent dans toutes les formes. aspect-ratio combiné à object-fit: cover rend la grille nette sans modifier un seul fichier.
Classes Tailwind pour le ratio et l'ajustement
Utilitaires Tailwind v4 (consultez la documentation v3 si vous utilisez une version plus ancienne)
CSS
Tailwind
aspect-ratio: 1 / 1
aspect-ratio: 16 / 9
aspect-ratio: auto
aspect-ratio: 3 / 2
aspect-3/2 (v4) ou aspect-[3/2]
object-fit: cover / contain / fill
object-cover / object-contain / object-fill
object-fit: none / scale-down
object-none / object-scale-down
object-position: center / top / bottom
object-center / object-top / object-bottom
object-position: 30% 40%
object-[30%_40%]
Étire l'image aux dimensions de la boîte. Valeur par défaut pour img et video. Déforme quand les ratios diffèrent.
Met toute l'image à l'échelle pour qu'elle tienne dans la boîte. Laisse des bandes vides (letterboxing) quand les ratios diffèrent.
Met l'image à l'échelle pour remplir la boîte et recadre le débordement. Aucune déformation, aucune bande, une partie de l'image est coupée.
Garde l'image à sa taille naturelle et recadre tout ce qui ne tient pas. Idéal pour montrer un détail à l'échelle 1:1.
Se comporte comme none ou contain, selon celui qui donne le résultat le plus petit. N'agrandit jamais une petite image.
Bac à sable ratio, ajustement et point focal
Image source (3:2). Cliquez dessus, ou donnez-lui le focus et utilisez les flèches du clavier, pour définir le point focal.
Définir le point focal, actuellement {pos}
Paysage de test avec un point rouge comme sujet
Recentrer
Résultat dans une boîte {ratio} avec object-fit: {fit}
Ratio de la boîte
Le point focal compte surtout avec cover et none. Avec contain ou scale-down, il décide où se placent les bandes vides.
Copier le CSS
Copier les classes
Besoin de la taille exacte en pixels pour un ratio ? Utilisez le