Co-mheasan

Cleachd eileamaidean pseudo gineadh gus eileamaid a dhèanamh cumail suas a’ cho-mheas taobh a thagh thu. Fìor mhath airson a bhith a’ làimhseachadh bhidio no taisbeanadh-shleamhnagan stèidhichte air leud a’ phàrant.

Air an duilleig seo

Mu dheidhinn

Cleachd an neach-cuideachaidh co-mheas gus co-mheasan taobh de shusbaint a-muigh leithid <iframe>s, <embed>s, <video>s, agus <object>s a riaghladh. Faodar an luchd-cuideachaidh seo a chleachdadh cuideachd air eileamaid cloinne HTML àbhaisteach (me, a <div>no <img>). Tha stoidhlichean air an cur an sàs bhon .ratiochlas phàrant gu dìreach ris a’ phàiste.

Tha co-mheasan taobh air an ainmeachadh ann am mapa Sass agus air an toirt a-steach do gach clas tro chaochladair CSS, a tha cuideachd a’ ceadachadh co-mheasan taobh àbhaisteach .

Pro-Tip! Cha bhith feum frameborder="0"agad air na <iframe>s agad oir tha sinn a’ dol thairis air sin dhut ann an Reboot .

eisimpleir

Còmhdaich freumhachadh sam bith, mar <iframe>, ann an eileamaid phàrant le .ratioagus clas co-mheas taobh. Tha an eileamaid cloinne sa bhad air a mheudachadh gu fèin-ghluasadach le taing don neach-taghaidh uile-choitcheann againn .ratio > *.

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

Co-mheasan taobh

Faodar co-mheasan taobh a ghnàthachadh le clasaichean mion-atharrachaidh. Gu gnàthach tha na clasaichean co-mheas a leanas air an toirt seachad:

1x1

4x3

16x9

21x9

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

Co-mheasan gnàthaichte

.ratio-*Tha seilbh àbhaisteach CSS (no caochladair CSS) anns gach clas anns an roghnaichear. Faodaidh tu a dhol thairis air a’ chaochladair CSS seo gus co-mheasan taobh àbhaisteach a chruthachadh air an itealan le beagan matamataigs sgiobalta às do leth.

Mar eisimpleir, gus co-mheas taobh 2x1 a chruthachadh, suidhichte --bs-aspect-ratio: 50%air an .ratio.

2x1

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

Tha an caochladair CSS seo ga dhèanamh furasta an co-mheas taobh atharrachadh thar puingean brisidh. Is e na leanas 4x3 airson tòiseachadh, ach atharraichidh e gu 2x1 àbhaisteach aig a’ phuing-bhriseadh meadhanach.

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

4x3, an uairsin 2x1

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

mapa Sass

Taobh a-staigh _variables.scss, faodaidh tu na co-mheasan taobh a tha thu airson a chleachdadh atharrachadh. $ratio-aspect-ratiosSeo am mapa bunaiteach againn . Atharraich am mapa mar a thogras tu agus cuir ri chèile do Sass airson an cleachdadh.

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