Umi ratio rehegua

Eipuru umi elemento seudo oñembohekopyréva ejapo hag̃ua peteĩ elemento omantene hag̃ua pe relación de aspecto reiporavóva. Iporãiterei oñemaneja hag̃ua ñembohovái porã umi video térã diapositiva jehechaukarã oñemboguapy hag̃ua tuvakuéra ipekue rehe.

Ko páhinape

Upéva rehegua

Eipuru pytyvõhára ratio rehegua emohenda hagua umi relación aspecto rehegua contenido okapegua <iframe>s, <embed>s, <video>s ha <object>s-icha. Ko’ã pytyvõhára ikatu avei ojepuru oimeraẽva elemento mitã HTML estándar rehe (techapyrã, a <div>térã <img>). Umi estilo ojeaplika .ratioclase tuvakuéra guive directamente mitãme.

Umi relación de aspecto ojedeclara peteĩ mapa Sass-pe ha oike peteĩteĩva clase-pe variable CSS rupive, ohejáva avei umi relación de aspecto personalizado .

¡Pro-Consejo! Natekotevẽi frameborder="0"nde <iframe>s-pe romboykévo upéva ndéve g̃uarã Reboot -pe .

Tembiecharã

Embojere oimeraẽva embed, peteĩ <iframe>, peteĩ elemento túvape orekóva .ratioha peteĩ clase relación aspecto rehegua. Pe elemento mitã pya’e oñembotuicha ijeheguiete ore selector universal rupive .ratio > *.

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

Umi relación de aspecto rehegua

Umi relación aspecto rehegua ikatu oñemboheko umi clase modificador reheve. Por defecto oñemeꞌe koꞌã clase ratio rehegua:

1x1 rehegua

4x3 rehegua

16x9 rehegua

21x9 rehegua

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

Umi ratio aduanero rehegua

Káda .ratio-*mboꞌepy oguereko peteĩ CSS mbaꞌekuaarã jeporupyre (térã CSS mbaꞌekuaarã) jeporavohárape. Ikatu embogue ko CSS mba’ekuaarã emoheñói hag̃ua aspecto ratio personalizado en vuelo peteĩ matemática pya’e reheve nde parte-gui.

Techapyrã, ojejapo hag̃ua peteĩ relación de aspecto 2x1, --bs-aspect-ratio: 50%emohenda .ratio.

2x1 rehegua

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

Ko CSS mbaꞌekuaarã ombohape oñemoambue hag̃ua aspecto ratio umi punto de ruptura rupi. Koꞌava haꞌehína 4x3 oñepyrũ hag̃ua, ha katu oñemoambue peteĩ jeporupyre 2x1-pe pe punto de ruptura mediano-pe.

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

4x3, upéi 2x1

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

Sass mapa rehegua

, ryepýpe _variables.scssikatu remoambue umi relación de aspecto reipuruséva. Ko'ápe oĩ ore $ratio-aspect-ratiosmapa por defecto. Emoambue pe mapa reipotáicha ha embojoaju jey nde Sass emoĩ hag̃ua ojepuru hag̃ua.

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