Í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.
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 .ratio
classe 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 .
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 .ratio
e 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:
<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
.
<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
}
}
<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-ratios
mapa 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%)
);