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.
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 .ratio
clase 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 .
Ejemplo
Envuelva cualquier incrustación, como un <iframe>
, en un elemento principal con .ratio
una clase de relación de aspecto. El elemento secundario inmediato se dimensiona 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="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:
<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
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass mapa
Dentro _variables.scss
de , puede cambiar las relaciones de aspecto que desea utilizar. Aquí está nuestro $ratio-aspect-ratios
mapa 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%)
);