अनुपातों दा

तकरीबन

<iframe>एस, <embed>एस, <video>एस, ते एस जनेह् बाहरी सामग्री दे पहलू अनुपातें गी प्रबंधत करने आस्तै अनुपात सहायक दा उपयोग करो <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>

एह् 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%)
);