Dagiti Ratio

Usaren dagiti napataud a pseudo nga elemento tapno mangaramid ti maysa nga elemento a mangtaginayon ti aspeto a ratio ti piliem. Perpekto para iti responsive a panangtaming kadagiti video wenno slideshow embed a naibatay iti kalawa ti nagannak.

Iti daytoy a panid

Maipapan

Usaren ti katulongan ti ratio tapno imanehar dagiti aspeto a ratio ti akinruar a linaon a kas <iframe>ti s, <embed>s, <video>s, ken <object>s. Dagitoy a katulongan ket mabalin pay a mausar iti ania man a pagalagadan nga elemento ti ubing nga HTML (kas pagarigan, a <div>wenno <img>). Dagiti estilo ket mayaplikar manipud iti .ratioklase ti nagannak a direkta iti ubing.

Dagiti ratio ti aspeto ket naideklara iti mapa ti Sass ken nairaman iti tunggal maysa a klase babaen ti CSS a variable, a mangipalubos pay kadagiti kostumbre nga aspeto a ratio .

Pro-Tip nga! Saanmo a kasapulan frameborder="0"iti <iframe>s-mo bayat nga i-overridemi dayta para kenka iti Reboot .

Pagwadan

Balkoten ti ania man nga embed, kas ti <iframe>, iti nagannak nga elemento nga addaan .ratioken maysa a klase ti aspect ratio. Ti dagus nga elemento ti ubing ket automatiko a kadakkel gapu iti sapasap a managpilitayo .ratio > *.

html nga

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

Dagiti ratio ti aspeto

Dagiti ratio ti aspeto ket mabalin a mapasayaat babaen dagiti klase ti mangbalbaliw. Babaen ti default dagiti sumaganad a klase ti ratio ket naited:

1x1 nga

4x3 nga

16x9 nga

21x9 nga

html nga

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

Dagiti kostumbre a ratio

Tunggal .ratio-*klase ket mangiraman ti CSS a kostumbre a tagikua (wenno CSS a variable) iti agpili. Mabalinmo nga i-override daytoy a variable ti CSS tapno mangpartuat kadagiti kostumbre nga aspeto a ratio iti panagtayab nga addaan iti sumagmamano a napardas a matematika iti biangmo.

Kas pagarigan, tapno makaaramid ti 2x1 nga aspeto a ratio, ikeddeng --bs-aspect-ratio: 50%iti .ratio.

2x1 nga

html nga

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

Daytoy a variable ti CSS ket mangpalaka ti panangbalbaliw ti aspeto a ratio iti ballasiw dagiti breakpoint. Ti sumaganad ket 4x3 tapno mangrugi, ngem agbaliw iti kostumbre a 2x1 iti kalalainganna a breakpoint.

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

4x3, kalpasanna 2x1

html nga

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

Sass nga mapa

Iti uneg _variables.scssti , mabalinmo a baliwan dagiti aspect ratio a kayatmo nga usaren. Ania ti default $ratio-aspect-ratiosa mapatayo. Baliwam ti mapa kas kayatmo ken urnongem manen ti Sass-mo tapno mausar dagitoy.

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