Ratios nisqakuna

Huk elemento akllasqaykipa aspecto ratiota waqaychananpaq, paqarichisqa pseudo elementokunata llamk'achiy. Perfecto video utaq diapositivas embeds nisqakunata tayta mamapa anchonman hina kutichispa hapinapaq.

Kay p'anqapi

Sobre

Ratio yanapaqwan hawa contenidopa aspecto ratiokuna kamachinapaq <iframe>s, <embed>s, <video>s, <object>s hina. Kay yanapaqkunapas mayqin HTML wawa elemento estándar kaqpipas llamk'achiy atikunku (kayhina, a <div>utaq <img>). Estilos nisqakunam tayta mama .ratioclasemanta chiqap warmaman churakun.

Aspecto ratiokuna huk Sass mapa kaqpi willasqa chaymanta sapa clase kaqpi CSS variable kaqnintakama churasqa, chaymanta sapanchasqa aspecto ratios kaqtapas saqin .

Pro-Consejo! Mana necesitankichu frameborder="0"sniykipi <iframe>imaynachus chayta qampaq Reboot kaqpi llalliykuyku .

Qatina

Ima churaytapas, huk hina <iframe>, huk tayta elementopi .ratiochaymanta huk aspecto ratio clasewan p'istuy. Chaylla wawa elementoqa kikinmanta sayayniyuqmi 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>

Ratios de aspecto nisqa

Aspecto ratiokuna modificador clasekunawan ruwasqa kanman. Ñawpaqmanta kay ratio clasekuna qusqa kanku:

1x1 nisqa

4x3 nisqa

16x9 nisqa

21x9 nisqa

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

Ratios personalizados nisqa

Sapa .ratio-*clase huk CSS sapanchasqa propiedad (utaq CSS variable) akllaqpi churan. Kay CSS tikraqta llallichiyta atikunki sapanchasqa aspecto ratiokuna ruwanapaq phawaypi wakin utqaylla yupaywan qammanta.

Ejemplopaq, 2x1 aspecto ratio ruwanapaq --bs-aspect-ratio: 50%, .ratio.

2x1 nisqa

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

Kay CSS tikraq ruwan mana sasachu aspecto ratio tikrayta tukuy p'akisqakuna kaqpi. Kay qatiq 4x3 qallariypaq, ichaqa huk costumbre 2x1 kaqman tikran chawpi p'akiypi.

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

4x3, chaymanta 2x1

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

Sass mapa

, ukhupi _variables.scss, llamk'achiyta munasqayki aspecto ratios nisqakunata tikrayta atinki. Kaypi ñawpaqmanta ruwasqa $ratio-aspect-ratiosmapayku kachkan. Modifica el mapa como quieras y recompila tu Sass para ponerlos a utilizar.

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