Un premier aperçu de `aspect ratio`

CSS inaugure un nouvel attribut qui affecte la taille de la boîte - aspect-ratio ! C'est un grand événement. Bien qu'il existe déjà de nombreuses façons de créer des boîtes avec des rapports d'aspect spécifiés (je pense qu'une solution basée sur des propriétés personnalisées est la meilleure), aucune n'est particulièrement intuitive et certainement pas aussi simple que de déclarer une seule propriété.

Avec aspect-ratio (MDN, pour ne pas confondre avec les versions de requête multimédia), je veux examiner comment cela fonctionne et essayer de le comprendre.

Grâce à Una de m'avoir permis de voir cette propriété en premier, cela a vraiment attiré beaucoup de gens. Voici quelques-unes de mes tentatives.

L'utilisation d' aspect-ratio sur les éléments seuls calculera la hauteur en fonction de la largeur automatique.

Sans régler la largeur, l'élément a toujours une largeur automatique naturelle. Par conséquent, la hauteur peut être calculée en fonction du rapport d'aspect et de la largeur du rendu.

 .el {
  Ratio d'aspect: 16/9;
}

Si le contenu dépasse le rapport d'aspect, l'élément se développera.

Dans ce cas, le rapport d'aspect sera ignoré, ce qui est en fait bon. C'est pourquoi la stratégie pseudo-élémentaire est populaire pour les ratios d'aspect, car cela ne conduit pas à une perte de données dangereuse ou à un chevauchement maladroit lorsqu'il y a trop de contenu.

Cependant, si vous souhaitez limiter la hauteur au rapport d'aspect, vous pouvez le faire en ajoutant min-height: 0;

Si un élément a une de hauteur ou de largeur , l'autre est calculée en fonction du rapport d'aspect.

aspect-ratio est donc essentiellement un moyen de définir une autre dimension lorsque vous n'avez qu'une seule dimension.

Si l'élément a à la fois la hauteur et la largeur , aspect-ratio est ignoré.

Une combinaison explicite de hauteur et de largeur est "plus forte" que le rapport d'aspect.

Considérez min-* et max-*

Il y a toujours une certaine tension entre la largeur, la largeur minimale et la largeur maximale (ou version de hauteur). L'un d'eux "gagne toujours". Habituellement, c'est intuitif.

Si vous définissez width: 100px; et min-width: 200px; , min-width gagnera. Donc, min-width est ignorée (parce que vous l'avez déjà dépassé) ou gagné. Il en va de même pour max-width : si vous définissez width: 100px; et max-width: 50px; , max-width gagnera. max-width est donc ignorée (car vous êtes déjà en dessous) ou gagné.

Il semble que cette intuition commune s'applique également ici: min-* et max-* gagnent ou n'ont pas d'importance. S'ils gagnent, le ratio d'aspect sera détruit.

 .el {
  Ratio d'aspect: 1/4;
  hauteur: 500px;

  / * est ignoré car la largeur est calculée comme 125px * /
  / * Min-largeur: 100px; * /

  / * Gagner, faire le ratio d'aspect 1/2 * /
  / * Min-largeur: 250px; * /
}

Utiliser les fonctions de valeur

Dans les situations fluides ou à tout moment où vous ne connaissez pas la dimension à l'avance, les rapports d'aspect sont toujours les plus utiles. Mais même si vous ne le savez pas, vous imposez souvent des contraintes aux choses. Par exemple, la largeur de 50% est bonne, mais vous voulez juste le réduire à 200px. Vous pouvez utiliser width: max(50%, 200px); . Ou utilisez clamp(200px, 50%, 400px); pour imposer des contraintes des deux côtés.

Cela semble intuitif:

 .el {
  Ratio d'aspect: 4/3;
  Largeur: pince (200px, 50%, 400px);
}

Mais supposons que vous rencontriez une valeur minimale de 200px, puis appliquez min-width de 300px? min-width minuscule. C'est toujours intuitif, mais cela peut être déroutant en raison des nombreuses propriétés, fonctions et valeurs impliquées.

Peut-être qu'il serait utile de considérer le aspect-ratio comme le moyen le plus faible de déterminer la taille d'un élément?

Il ne l'emporte jamais sur aucune autre information de taille, mais s'il n'y a pas d'autres informations disponibles dans la dimension, elle effectuera toujours son redimensionnement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!