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.
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 .ratio
chlas 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 .
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 .ratio
agus 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:
<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
.
<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
}
}
<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-ratios
Seo 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%)
);