Catégories
Astuces et Design

Un premier aperçu du «rapport hauteur / largeur»

Oh hey! Une toute nouvelle propriété qui affecte la taille d'une boîte! C’est un gros problème. Il existe déjà de nombreuses façons de créer une boîte de taille aux proportions (et je dirais que cette solution basée sur les propriétés personnalisées est la meilleure), mais aucune d'entre elles n'est particulièrement intuitive et certainement pas aussi simple que de déclarer une seule propriété.

Donc, avec l'arrivée imminente de aspect-ratio (MDN, et à ne pas confondre avec la version de la requête média), j'ai pensé jeter un coup d'œil à son fonctionnement et essayer de me faire une idée.

Criez à Una où j'ai vu ça pour la première fois. Howdy at-il suscité l'intérêt des gens:

Je laisse tomber aspect-ratio sur un élément seul calculera une hauteur en fonction de la auto largeur.

Sans définir une largeur, un élément aura toujours une auto naturelle width. Ainsi, la hauteur peut être calculée à partir du rapport d'aspect et de la largeur rendue.

.el {
  aspect-ratio: 16 / 9;
}

Si le contenu sort du rapport hauteur / largeur, l'élément continue de se développer.

Le rapport d'aspect est ignoré dans cette situation, ce qui est en fait agréable. Mieux vaut éviter la perte potentielle de données. Si vous préférez, cela ne fonctionne pas, vous pouvez toujours utiliser le style de hack de remplissage.

Si l'élément a Soit une hauteur ou une largeur, l'autre est calculée à partir du rapport d'aspect.

Donc aspect-ratio est fondamentalement une façon de voir l'autre direction quand vous n'en avez qu'une (démo).

Si l'élément a tous les deux une hauteur et une largeur, aspect-ratio est ignoré.

La combinaison d'une hauteur et d'une largeur explicites est «plus forte» que le rapport hauteur / largeur.

Prise en compte min-* et max-*

Il y a toujours un peu de tension entre width, min-width, et max-width (ou les versions en hauteur). L'un d'eux «gagne toujours». C'est généralement assez intuitif.

Si vous définissez width: 100px; et min-width: 200px; puis min-width gagneront. Donc, min-width est soit ignoré parce que vous en avez déjà fini, soit gagne. Même affaire avec max-width: si vous définissez width: 100px; et max-width: 50px; puis max-width gagneront. Donc, max-width est soit ignoré parce que vous êtes déjà en dessous, soit gagne.

Il semble que l'intuitivité générale se poursuive ici: la min-* et max-* les propriétés gagneront ou ne seront pas pertinentes. Et s'ils gagnent, ils brisent le aspect-ratio.

.el {
  aspect-ratio: 1 / 4;
  height: 500px;

  /* Ignored, because width is calculated to be 125px */
  /* min-width: 100px; */

  /* Wins, making the aspect ratio 1 / 2 */
  /* min-width: 250px; */
}

Avec fonctions de valeur

Les proportions sont toujours plus utiles dans des situations fluides, ou à tout moment où vous ne connaissez pas à l'avance l'une des dimensions. Mais même lorsque vous ne savez pas, vous mettez souvent des contraintes sur les choses. Supposons que 50% de largeur soit cool, mais vous voulez seulement qu'elle rétrécisse jusqu'à 200 pixels. Vous pourriez faire de la largeur: max(50%, 200px);. Ou contraindre des deux côtés avec clamp(200px, 50%, 400px);.

Cela semble fonctionner inutilement:

.el {
  aspect-ratio: 4 / 3;
  width: clamp(200px, 50%, 400px);
}

Mais disons que vous rencontrez ce minimum de 200 pixels, puis appliquez un min-width de 300px? le min-width gagne. Il est toujours intuitif, mais il devient incurvé en raison du nombre de propriétés, de fonctions et de valeurs qui peuvent être impliquées.

Il est peut-être utile de penser à aspect-ratio comme le le plus faible façon de dimensionner un élément?

Il ne battra jamais aucune autre information de dimensionnement, mais il fera toujours son dimensionnement s'il n'y a aucune autre information disponible pour cette dimension.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *