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.

Leqepheng lena

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

Pro-Tip! Ha u hloke ho s frameborder="0"ea hau ha re ntse re u ngolla eona ho Reboot . <iframe>

Mohlala

Koahela ntho e 'ngoe le e 'ngoe, joalo ka <iframe>, ka karolo ea motsoali .ratiole sehlopha sa karo-karolelano. Karolo ea hona joale ea bana e iteka ka bohona ka lebaka la mokhethoa oa rona oa bokahohle .ratio > *.

html

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

1x1

4x3

16x9

21x9

html

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

2x1

html

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

4x3, ebe 2x1

html

<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%)
);