Proporciones de aspecto (Ratios)

Acerca de (About)

Utiliza el ayudante de proporción para administrar las proporciones de aspecto del 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, un <div> o <img>). Los estilos se aplican desde la clase padre .ratio directamente al hijo.

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

Ejemplo

Envuelve cualquier incrustación, como un <iframe>, en un elemento padre con .ratio y una clase de proporción de aspecto. El elemento hijo inmediato cambia de tamaño automáticamente gracias a nuestro selector universal .ratio > *.

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

Proporciones de aspecto

Las proporciones de aspecto se pueden personalizar con clases modificadoras. Por defecto se proporcionan las siguientes clases de proporción:

<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 clase .ratio-* incluye una propiedad CSS personalizada (o variable CSS) en el selector. Puedes sobrescribir esta variable CSS para crear proporciones de aspecto personalizadas sobre la marcha con un poco de matemáticas rápidas por tu parte.

Por ejemplo, para crear una proporción de aspecto de 2x1, establece --bs-aspect-ratio: 50% en el .ratio.

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

Esta variable CSS facilita la modificación de la proporción de aspecto a lo largo de los puntos de interrupción (breakpoints). El siguiente ejemplo empieza en 4x3, pero cambia a un 2x1 personalizado en el punto de interrupción mediano (md).

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

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

Mapas Sass

Dentro de _variables.scss, puedes cambiar las proporciones de aspecto que deseas usar. Aquí está nuestro mapa predeterminado $ratio-aspect-ratios. Modifica el mapa como desees y recompila tu Sass para ponerlos en uso.

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