Skip to main content Skip to docs navigation
En GitHub

Relación de aspecto

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

En esta página

Acerca de ratio

Utiliza el asistente de proporción para administrar las proporciones de aspecto de contenido externo como <iframe>s, <embed>s, <video>s y <object>s. Estos helpers 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 principal .ratio directamente a la secundaria.

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

¡Pro-Tip! No necesitas frameborder="0" en tus <iframe>s, ya que lo sobrescribimos en Reboot.

Ejemplo

Envuelve cualquier inserción, como un <iframe>, en un elemento padre con una clase .ratio y una clase de relación de aspecto. El elemento secundario inmediato se dimensiona automáticamente gracias a nuestro selector universal .ratio > *.

(inserta el iframe del video aquí) 
<div class="ratio ratio-16x9">
  (inserta el iframe del video aquí)
</div>

Relaciones de aspecto

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

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>

Proporciones personalizadas

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

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

2x1
<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 breakpoints. Lo siguiente es 4x3 para comenzar, pero cambia a un 2x1 personalizado en el breakpoint medium.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
4x3, then 2x1
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass map

Dentro de _variables.scss, puedes cambiar las relaciones de aspecto que deseas utilizar. Aquí está nuestro mapa $ratio-aspect-ratios por defecto. Modifica el mapa como desees y vuelve a compilar 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%)
);