Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

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

Pro-Imọran! O ko nilo frameborder="0"lori <iframe>s rẹ bi a ṣe bori iyẹn fun ọ ni Atunbere .

Apeere

Pa eyikeyi ifibọ, bi ohun <iframe>, ni a obi ano pẹlu .ratioati ẹya ipin ipin. Ẹya ọmọ lẹsẹkẹsẹ jẹ iwọn laifọwọyi ọpẹ si yiyan gbogbo agbaye wa .ratio > *.

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

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>

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.

2x1
html
<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
  }
}
4x3, lẹhinna 2x1
html
<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-ratiosEyi 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%)
);