अनुपात

विषय में

<iframe>s, <embed>s, <video>s, आ s जैना बाहरी सामग्री कें पहलू अनुपात कें प्रबंधन करय कें लेल अनुपात सहायक कें उपयोग करूं <object>. इ सहायकक कें उपयोग कोनों मानक एचटीएमएल चाइल्ड तत्व (जैना, क <div>या <img>) पर सेहो कैल जा सकय छै. शैली अभिभावक .ratioवर्ग सं सीधा बच्चा पर लागू कैल जायत छै.

आस्पेक्ट रेशियो कें एकटा सास मैप मे घोषित कैल जैत छै आ सीएसएस चर कें माध्यम सं प्रत्येक वर्ग मे शामिल कैल जैत छै, जे कस्टम आस्पेक्ट रेशियो कें सेहो अनुमति देयत छै .

उदाहरण

कोनो एम्बेड, जेना एकटा <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>

This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.

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

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

Sass map

Within _variables.scss, you can change the aspect ratios you want to use. Here’s our default $ratio-aspect-ratios map. Modify the map as you like and recompile your Sass to put them to use.

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