Ver en GitHub

Ratios

Usa pseudo elementos generados para hacer que un elemento mantenga la relación de aspecto que elijas. Perfecto para gestionar de forma responsive embeds de video o presentaciones basándose en el ancho del padre.

On this page

Acerca de

Usa el helper ratio para gestionar las relaciones de aspecto de contenido externo como <iframe>s, <embed>s, <video>s y <object>s. Estos helpers también pueden usarse en cualquier elemento HTML hijo estándar (por ejemplo, un <div> o <img>). Los estilos se aplican desde la clase padre .ratio directamente al hijo.

Las relaciones de aspecto se declaran en un map de Sass y se incluyen en cada clase mediante una variable CSS, lo que también permite relaciones de aspecto personalizadas.

¡Consejo! No necesitas frameborder="0" en tus <iframe>s ya que lo sobrescribimos por ti en Reboot.

Ejemplo

Envuelve cualquier embed, como un <iframe>, en un elemento padre con .ratio y una clase de relación de aspecto. El elemento hijo directo 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>

Proporciones de aspecto

Las relaciones de aspecto se pueden personalizar con clases modificadoras. Por defecto se proporcionan las siguientes clases de ratio:

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 clase .ratio-* incluye una propiedad personalizada CSS (o variable CSS) en el selector. Puedes sobrescribir esta variable CSS para crear relaciones de aspecto personalizadas al vuelo con algunos cálculos rápidos de tu parte.

Por ejemplo, para crear una relación de aspecto 2x1, establece --bs-aspect-ratio: 50% en el .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 entre breakpoints. La siguiente empieza como 4x3, pero cambia a un 2x1 personalizado en el breakpoint medium.

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

Mapa de Sass

Dentro de _variables.scss, puedes cambiar las relaciones de aspecto que quieres usar. Aquí está nuestro map $ratio-aspect-ratios por defecto. Modifica el map como quieras y recompila tu Sass para empezar a usarlos.

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