proporciones

Use pseudo elementos generados para hacer que un elemento mantenga la relación de aspecto de su elección. Perfecto para manejar incrustaciones de video o presentación de diapositivas de manera receptiva según el ancho del padre.

En esta página

Sobre

Utilice el asistente de proporción para administrar las proporciones de contenido externo como <iframe>s, <embed>s, <video>s y <object>s. Estos ayudantes también se pueden usar en cualquier elemento secundario HTML estándar (por ejemplo, a <div>o <img>). Los estilos se aplican desde la .ratioclase principal directamente a la clase secundaria.

Las relaciones de aspecto se declaran en un mapa Sass y se incluyen en cada clase a través de la variable CSS, que también permite relaciones de aspecto personalizadas .

¡Consejo profesional! No necesita frameborder="0"en su <iframe>s, ya que lo anulamos en Reiniciar .

Ejemplo

Envuelva cualquier incrustación, como un <iframe>, en un elemento principal con .ratiouna clase de relación de aspecto. El elemento secundario inmediato se dimensiona automáticamente gracias a nuestro selector universal .ratio > *.

html

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

Relaciones de aspecto

Las relaciones de aspecto se pueden personalizar con clases de modificadores. De forma predeterminada, se proporcionan las siguientes clases de relación:

1x1

4x3

16x9

21x9

html

<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>

Proporciones personalizadas

Cada .ratio-*clase incluye una propiedad personalizada CSS (o variable CSS) en el selector. Puede anular esta variable CSS para crear relaciones de aspecto personalizadas sobre la marcha con algunos cálculos rápidos de su parte.

Por ejemplo, para crear una relación de aspecto de 2x1, configure --bs-aspect-ratio: 50%el archivo .ratio.

2x1

html

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

Esta variable CSS facilita la modificación de la relación de aspecto en los puntos de interrupción. Lo siguiente es 4x3 para comenzar, pero cambia a un 2x1 personalizado en el punto de interrupción medio.

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

4x3, luego 2x1

html

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

Sass mapa

Dentro _variables.scssde , puede cambiar las relaciones de aspecto que desea utilizar. Aquí está nuestro $ratio-aspect-ratiosmapa predeterminado. Modifique el mapa como desee y vuelva a compilar su Sass para ponerlos en uso.

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