Uwiano

Tumia vipengele vya uwongo vilivyoundwa ili kufanya kipengele kudumisha uwiano wa chaguo lako. Ni kamili kwa kushughulikia kwa uwajibikaji upachikaji wa video au onyesho la slaidi kulingana na upana wa mzazi.

Katika ukurasa huu

Kuhusu

Tumia kisaidizi cha uwiano ili kudhibiti uwiano wa vipengele vya maudhui ya nje kama vile <iframe>s, <embed>s, <video>s na <object>s. Visaidizi hivi pia vinaweza kutumika kwenye kipengele chochote cha kawaida cha mtoto cha HTML (kwa mfano, a <div>au <img>). Mitindo inatumika kutoka kwa .ratiodarasa la wazazi moja kwa moja kwa mtoto.

Uwiano wa vipengele hutangazwa katika ramani ya Sass na kujumuishwa katika kila darasa kupitia utofauti wa CSS, ambao pia huruhusu uwiano wa vipengele maalum .

Pro-Tip! Huhitaji frameborder="0"kwenye yako <iframe>tunapobatilisha hiyo kwa ajili yako katika Reboot .

Mfano

Funga kipachiko chochote, kama <iframe>, katika kipengele cha mzazi na .ratiodarasa la uwiano wa kipengele. Kipengele cha sasa cha mtoto kina ukubwa wa kiotomatiki shukrani kwa kiteuzi chetu cha ulimwengu wote .ratio > *.

html

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

Uwiano wa vipengele

Uwiano wa vipengele unaweza kubinafsishwa kwa madarasa ya kurekebisha. Kwa chaguo-msingi, viwango vifuatavyo vya uwiano vinatolewa:

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>

Uwiano maalum

Kila .ratio-*darasa linajumuisha kipengele maalum cha CSS (au kigeu cha CSS) kwenye kiteuzi. Unaweza kubatilisha utofauti huu wa CSS ili kuunda uwiano wa vipengele maalum kwenye nzi kwa hesabu ya haraka kwa upande wako.

Kwa mfano, ili kuunda uwiano wa 2x1, weka --bs-aspect-ratio: 50%kwenye .ratio.

2x1

html

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

Tofauti hii ya CSS hurahisisha kurekebisha uwiano wa vipengele katika sehemu zote za kukiuka. Ifuatayo ni 4x3 kuanza, lakini inabadilika hadi 2x1 maalum kwenye sehemu ya kati ya kukatika.

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

4x3, kisha 2x1

html

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

Ramani ya Sass

Ndani _variables.scssya , unaweza kubadilisha uwiano wa vipengele unavyotaka kutumia. $ratio-aspect-ratiosHii hapa ramani yetu chaguomsingi . Rekebisha ramani upendavyo na uunde upya Sass yako ili uitumie.

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