Saamiyada
Isticmaal walxaha been abuurka ah si aad shay u ilaaliso saamiga doorashadaada. Ku fiican in si taxadar leh loo maareeyo fiidyowga ama sawir-gacmeedka gundhigga ee ku salaysan ballaca waalidka.
Ku saabsan
Isticmaal kaaliyaha saamiga si aad u maamusho saami qaybsiga macluumaadka dibadda sida <iframe>
s, <embed>
s, <video>
s, iyo <object>
s. Caawiyaashan waxa kale oo loo isticmaali karaa cunsur kasta oo HTML ah oo caadi ah (tusaale, a <div>
ama <img>
). Qaababka waxaa si toos ah looga dabaqaa .ratio
fasalka waalidka ilmaha.
Saamiyada dhinaca waxa lagu caddeeyey khariidadda Sass waxaana lagu daraa fasal kasta iyada oo loo marayo doorsoomiyaha CSS, kaas oo sidoo kale ogolaanaya saamiyo dhinaca caadada ah .
frameborder="0"
-kaaga
<iframe>
marka aanu taas kugu xad gudubno dib-u-
boot .
Tusaale
Ku duub wax alla wixii gundhig ah, sida an <iframe>
, oo ku jira walxaha waalidka .ratio
iyo fasalka saamiga. Cunsurka ilmaha dhow si toos ah ayaa loo cabbiraa iyada oo ay mahad naqayso doorkeena caalamiga ah .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Saamiyada dhinaca
Saamiyada dhinaca waxaa lagu habeyn karaa fasalada wax ka beddelka. Sida caadiga ah fasalada saamiga soo socda ayaa la bixiyaa:
<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>
Saamiyada gaarka ah
Fasal kasta .ratio-*
waxa ku jira hanti caadadii CSS (ama doorsoomaha CSS) ee doorashada. Waxaad meesha ka saari kartaa doorsoomiyaha CSS-ga si aad u abuurto saamiyo dhinaca caado ah oo duullimaad ah oo leh xoogaa xisaab degdeg ah oo dhinacaaga ah.
Tusaale ahaan, si loo abuuro saamiga 2x1, --bs-aspect-ratio: 50%
dhig .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Doorsoomiyaha CSS waxa uu fududeeyaa in wax laga beddelo saamiga dhinac ee meelaha jaban. Kuwa soo socdaa waa 4x3 si loo bilaabo, laakiin waxay u beddelaan caadadii 2x1 ee barta jabinta dhexdhexaadka ah.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Khariidadda Sass
Gudaha _variables.scss
, waxaad bedeli kartaa saamiga dhinaca aad rabto inaad isticmaasho. Waa kan $ratio-aspect-ratios
khariidaddayada caadiga ah. Wax ka beddel khariidadda sidaad jeceshahay oo dib u samee Sass-kaaga si aad u isticmaasho.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);