Índices

Use pseudo elementos gerados para fazer com que um elemento mantenha a proporção de sua escolha. Perfeito para o manuseio responsivo de incorporações de vídeo ou apresentação de slides com base na largura do pai.

Nesta página

Sobre

Use o auxiliar de proporção para gerenciar as proporções de conteúdo externo como <iframe>s, <embed>s, <video>s e <object>s. Esses auxiliares também podem ser usados em qualquer elemento filho HTML padrão (por exemplo, a <div>ou <img>). Os estilos são aplicados da .ratioclasse pai diretamente ao filho.

As proporções são declaradas em um mapa Sass e incluídas em cada classe via variável CSS, que também permite proporções personalizadas .

Dica profissional! Você não precisa frameborder="0"do seu <iframe>s, pois substituímos isso para você no Reboot .

Exemplo

Envolva qualquer incorporação, como um <iframe>, em um elemento pai com .ratioe uma classe de proporção. O elemento filho imediato é dimensionado automaticamente graças ao nosso seletor universal .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Proporções

As proporções podem ser personalizadas com classes modificadoras. Por padrão, as seguintes classes de proporção são fornecidas:

1x1

4x3

16x9

21x9

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

Proporções personalizadas

Cada .ratio-*classe inclui uma propriedade customizada CSS (ou variável CSS) no seletor. Você pode substituir essa variável CSS para criar proporções personalizadas em tempo real com alguns cálculos rápidos de sua parte.

Por exemplo, para criar uma proporção 2x1, defina --bs-aspect-ratio: 50%no arquivo .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Essa variável CSS facilita a modificação da proporção entre os pontos de interrupção. O seguinte é 4x3 para iniciar, mas muda para um 2x1 personalizado no ponto de interrupção médio.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, depois 2x1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Mapa Sass

Em _variables.scss, você pode alterar as proporções que deseja usar. Aqui está nosso $ratio-aspect-ratiosmapa padrão. Modifique o mapa como quiser e recompile seu Sass para usá-lo.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);