अनुपात

कोनो तत्व क॑ अपनऽ पसंद केरऽ पहलू अनुपात क॑ बनाए रखै लेली जेनरेट करलऽ गेलऽ छद्म तत्वऽ के प्रयोग करलऽ जाय । अभिभावक कें चौड़ाई कें आधार पर वीडियो या स्लाइड शो एम्बेड कें प्रतिक्रियाशील रूप सं संभालनाय कें लेल एकदम सही.

इस पेज पर

विषय में

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

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

प्रो-टिप ! frameborder="0"अहां के अपन s पर जरूरत नहिं अछि किएक त हम रिबूट<iframe> मे अहां के लेल ओहि के ओवरराइड करैत छी .

उदाहरण

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

पहलू अनुपात

आस्पेक्ट रेशियो कें संशोधक वर्गक कें साथ अनुकूलित कैल जा सकय छै. डिफ़ॉल्ट रूप सं निम्नलिखित अनुपात वर्ग उपलब्ध करायल गेल छै:

1x1 के

४x३ के

16x9 के

21x9 के

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

२x१ के

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

4x3, तखन 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%)
);