Razóns

Usa pseudoelementos xerados para que un elemento manteña a relación de aspecto que elixas. Perfecto para xestionar con resposta as insercións de vídeos ou presentacións de diapositivas en función do ancho do pai.

Nesta páxina

Sobre

Use o axudante de relación para xestionar as relacións de aspecto do contido externo como <iframe>s, <embed>s, <video>s e <object>s. Estes axudantes tamén se poden usar en calquera elemento fillo HTML estándar (por exemplo, a <div>ou <img>). Os estilos aplícanse desde a .ratioclase dos pais directamente ao fillo.

As relacións de aspecto decláranse nun mapa Sass e inclúense en cada clase mediante variables CSS, que tamén permiten relacións de aspecto personalizadas .

Pro-Tip! Non necesitas frameborder="0"o teu <iframe>s, xa que o anulamos en Reiniciar .

Exemplo

Envolve calquera incrustación, como un <iframe>, nun elemento pai cunha .ratioclase de relación de aspecto. O elemento fillo inmediato dimensiona automaticamente grazas ao noso selector universal .ratio > *.

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

Relacións de aspecto

As relacións de aspecto pódense personalizar con clases modificadoras. De forma predeterminada, proporciónanse as seguintes clases de ratio:

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>

Razóns personalizadas

Cada .ratio-*clase inclúe unha propiedade personalizada CSS (ou variable CSS) no selector. Podes anular esta variable CSS para crear relacións de aspecto personalizadas sobre a marcha cunhas matemáticas rápidas pola túa parte.

Por exemplo, para crear unha relación de aspecto 2x1, configure --bs-aspect-ratio: 50%o .ratio.

2x1

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

Esta variable CSS facilita a modificación da relación de aspecto entre os puntos de interrupción. O seguinte é 4x3 para comezar, pero cambia a un 2x1 personalizado no punto de interrupción medio.

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

4x3, despois 2x1

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

Mapa Sass

Dentro _variables.scssde , pode cambiar as relacións de aspecto que quere usar. Aquí está o noso $ratio-aspect-ratiosmapa predeterminado. Modifica o mapa como queiras e recompila o teu Sass para utilizalos.

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