Utilitário

Aspect Ratio

Define a proporção entre largura e altura de um elemento.

Classes

Classe CSS	Descrição
`.aspect-ratio-16:9`	`aspect-ratio: 16:9`
`.aspect-ratio-3:2`	`aspect-ratio: 3:2`
`.aspect-ratio-4:3`	`aspect-ratio: 4:3`
`.aspect-ratio-5:4`	`aspect-ratio: 5:4`
`.aspect-ratio-1:1`	`aspect-ratio: 1:1`
`.aspect-ratio-4:5`	`aspect-ratio: 4:5`
`.aspect-ratio-3:4`	`aspect-ratio: 3:4`
`.aspect-ratio-2:3`	`aspect-ratio: 2:3`
`.aspect-ratio-9:16`	`aspect-ratio: 9:16`

Para adicionar/remover classes aspect-ratio, no seu style.scss passe o array $aspect-ratio ao módulo config:

@use 'config' as * with (
  $aspect-ratio: (16 9, 3 2, 4 3, 5 4, 1 1, 4 5, 3 4, 2 3, 9 16)
);

Media wrapper

As classes .media-wrapper-{ratio} usam o padding hack para garantir o aspect ratio do elemento ao qual são aplicadas — útil para imagens, vídeos e iframes onde aspect-ratio isolado não cobre todos os navegadores.

Classe CSS	Descrição
`.media-wrapper-16:9`	`define o aspect-ratio do filho como 16:9`
`.media-wrapper-3:2`	`define o aspect-ratio do filho como 3:2`
`.media-wrapper-4:3`	`define o aspect-ratio do filho como 4:3`
`.media-wrapper-1:1`	`define o aspect-ratio do filho como 1:1`

Aplique .media-wrapper-{ratio} ao elemento pai da imagem, vídeo ou iframe:

<figure class="media-wrapper-4:3">
  <img src="image.jpg" alt="Image description">
</figure>