ڕێژەکان

دەربارەی

یارمەتیدەری ڕێژە بەکاربهێنە بۆ بەڕێوەبردنی ڕێژەی ڕووکاری ناوەڕۆکی دەرەکی وەک <iframe>s، <embed>s، <video>s، و <object>s. هەروەها دەتوانرێت ئەم یارمەتیدەرانە لەسەر هەر توخمێکی منداڵی HTML ستاندارد بەکاربهێنرێت (بۆ نموونە، a <div>یان <img>). ستایلەکان لە .ratioپۆلی دایک و باوکەوە ڕاستەوخۆ بۆ منداڵەکە جێبەجێ دەکرێن.

ڕێژەی ڕووکار لە نەخشەی ساسدا ڕادەگەیەنرێت و لە هەر پۆلێکدا لە ڕێگەی گۆڕاوەی CSS ەوە جێگیر دەکرێت، کە هەروەها ڕێگە بە ڕێژەی ڕووکاری تایبەت دەدات .

نموونە

هەر جێگیرکردنێک، وەک <iframe>, لە توخمێکی باوکدا بە .ratioو پۆلێکی ڕێژەی ڕووکار بپێچەرەوە. توخمە منداڵە دەستبەجێیەکە بە شێوەیەکی ئۆتۆماتیکی قەبارەی بەرز دەکرێتەوە بەهۆی هەڵبژێرەری گشتگیرەکەمانەوە .ratio > *.

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

ڕێژەی ڕووکارەکان

دەتوانرێت ڕێژەی ڕووکارەکان بە پۆلەکانی دەستکاریکەر خۆکارانە دابنرێت. بە شێوەیەكی بنەڕەتی ئەم پۆلانەی خوارەوەی ڕێژەیی دابین كراون:

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

ڕێژەی گومرگی

هەر .ratio-*پۆلێک تایبەتمەندییەکی تایبەتمەندی CSS (یان گۆڕاوێکی CSS) لە هەڵبژێرەرەکەدا لەخۆدەگرێت. دەتوانیت ئەم گۆڕاوەی CSS جێبەجێ بکەیت بۆ دروستکردنی ڕێژەی ڕووکاری تایبەتمەند لەسەر مێش لەگەڵ هەندێک بیرکاری خێرا لەلایەن خۆتەوە.

بۆ نموونە بۆ دروستکردنی ڕێژەی ڕووکاری 2x1، --bs-aspect-ratio: 50%لەسەر .ratio.

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

ئەم گۆڕاوەی CSS ئاسانکاری دەکات بۆ دەستکاریکردنی ڕێژەی ڕووبەر لە سەرانسەری خاڵەکانی شکاندن. ئەمانەی خوارەوە 4x3 یە بۆ دەستپێکردن، بەڵام دەگۆڕێت بۆ 2x1 ی تایبەت لە خاڵی شکاندنی مامناوەند.

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

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

نەخشەی ساس

لەناو _variables.scss, دەتوانیت ئەو ڕێژەیە ڕووکارانە بگۆڕیت کە دەتەوێت بەکاری بهێنیت. لێرەدا $ratio-aspect-ratiosنەخشەی پێشوەختەمان. نەخشەکە بە ئارەزووی خۆت دەستکاری بکە و ساسەکەت دووبارە کۆبکەرەوە بۆ ئەوەی بیخەیتە سەر بەکارهێنان.

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