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.
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 .ratio
clase 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 .
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 .ratio
ha 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:
<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
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass mapa rehegua
, ryepýpe _variables.scss
ikatu remoambue umi relación de aspecto reipuruséva. Ko'ápe oĩ ore $ratio-aspect-ratios
mapa 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%)
);