मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

अनुपात

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

विषय में

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

इ सीएसएस चर ब्रेकपॉइंट कें पार आस्पेक्ट रेशियो कें संशोधित करनाय आसान बनायत छै. निम्नलिखित शुरू करय लेल 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%)
);