Awọn ipin
Lo awọn eroja afarape ti ipilẹṣẹ lati jẹ ki ipin kan ṣetọju ipin abala ti yiyan rẹ. Pipe fun mimu fidio ni idahun tabi awọn ifibọ agbelera ti o da lori iwọn ti obi.
Nipa
Lo oluranlọwọ ipin lati ṣakoso awọn ipin abala ti akoonu ita bi <iframe>
s, <embed>
s, <video>
s, ati <object>
s. Awọn oluranlọwọ wọnyi tun le ṣee lo lori eyikeyi eroja ọmọ HTML boṣewa (fun apẹẹrẹ, a <div>
tabi <img>
). Awọn aṣa ni a lo lati kilasi obi .ratio
taara si ọmọ naa.
Awọn ipin abala jẹ ikede ni maapu Sass kan ati pe o wa ninu kilasi kọọkan nipasẹ oniyipada CSS, eyiti o tun ngbanilaaye awọn ipin abala aṣa .
Apeere
Pa eyikeyi ifibọ, bi ohun <iframe>
, ni a obi ano pẹlu .ratio
ati ẹya ipin ipin. Ẹya ọmọ lẹsẹkẹsẹ jẹ iwọn laifọwọyi ọpẹ si yiyan gbogbo agbaye wa .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Awọn ipin abala
Awọn ipin abala le jẹ adani pẹlu awọn kilasi modifier. Nipa aiyipada awọn kilasi ipin wọnyi ti pese:
<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>
Awọn iwọn aṣa
Kilasi kọọkan .ratio-*
pẹlu ohun-ini aṣa CSS kan (tabi oniyipada CSS) ninu yiyan. O le dojuiwọn oniyipada CSS yii lati ṣẹda awọn ipin abala aṣa lori fo pẹlu iṣiro iyara diẹ ni apakan rẹ.
Fun apẹẹrẹ, lati ṣẹda ipin abala 2x1, ṣeto --bs-aspect-ratio: 50%
lori .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Oniyipada CSS yii jẹ ki o rọrun lati yipada ipin abala kọja awọn aaye fifọ. Atẹle jẹ 4x3 lati bẹrẹ, ṣugbọn awọn iyipada si aṣa 2x1 ni aaye fifọ alabọde.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Maapu Sass
Ninu _variables.scss
, o le yi awọn ipin abala ti o fẹ lati lo. $ratio-aspect-ratios
Eyi ni maapu aiyipada wa. Ṣe atunṣe maapu naa bi o ṣe fẹ ki o tun Sass rẹ ṣajọpọ lati fi wọn si lilo.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);