Karolelano
Sebelisa likarolo tsa pseudo tse hlahisitsoeng ho etsa hore element e boloke karolo ea khetho ea hau. E nepahetse bakeng sa ho sebetsana le livideo kapa li-slideshow tse thehiloeng ho bophara ba motsoali.
About
Sebelisa karo-karolelano ho thusa ho laola likarolo tsa likahare tsa kantle joalo <iframe>
ka s, <embed>
s, <video>
s, le <object>
s. Bathusi bana le bona ba ka sebelisoa nthong efe kapa efe e tloaelehileng ea HTML ea bana (mohlala, a <div>
kapa <img>
). Mekhoa e sebelisoa ho tloha sehlopheng sa motsoali .ratio
ka ho toba ho ngoana.
Likarolo tsa likarolo li phatlalatsoa 'mapeng oa Sass 'me li kenyelelitsoe sehlopheng ka seng ka CSS e feto-fetohang, e lumellang hape likarolo tse tloaelehileng tsa likarolo .
Mohlala
Koahela ntho e 'ngoe le e 'ngoe, joalo ka <iframe>
, ka karolo ea motsoali .ratio
le sehlopha sa karo-karolelano. Karolo ea hona joale ea bana e iteka ka bohona ka lebaka la mokhethoa oa rona oa bokahohle .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Aspect ratios
Aspect ratios e ka hlophisoa ka litlelase tsa modifier. Ka ho sa feleng, lihlopha tse latelang tsa karolelano li fanoa:
<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>
Karolelano ea tloaelo
Sehlopha se seng le se seng .ratio-*
se kenyelletsa thepa ea tloaelo ea CSS (kapa mofuta oa CSS) ho khetho. U ka fetisa phapang ena ea CSS ho theha likarohano tsa maemo a tloaelo ho fofa ka lipalo tse potlakileng lehlakoreng la hau.
Mohlala, ho theha 2x1 aspect ratio, beha --bs-aspect-ratio: 50%
ho .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Phapang ena ea CSS e etsa hore ho be bonolo ho fetola sekhahla sa likarolo ho pholletsa le li-breakpoints. E latelang ke 4x3 ho qala, empa e fetoha tloaelo ea 2x1 nakong ea khefu e bohareng.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
'Mapa oa Sass
Ka har'a _variables.scss
, o ka fetola likarolo tseo u batlang ho li sebelisa. $ratio-aspect-ratios
'Mapa oa rona oa kamehla ke ona . Fetola 'mapa ka mokhoa oo u o ratang, 'me u boele u bokelle Sass ea hau hore u e sebelise.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);