अनुपातों दा
इक तत्व गी अपनी पसंद दे पहलू अनुपात गी बनाए रखने आस्तै पैदा कीते गेदे छद्म तत्वें दा इस्तेमाल करो. माता-पिता दी चौड़ाई दे आधार उप्पर वीडियो जां स्लाइड शो एम्बेड गी जवाबदेही कन्नै संभालने लेई बिल्कुल सही।
तकरीबन
<iframe>
एस, <embed>
एस, <video>
एस, ते एस जनेह् बाहरी सामग्री दे पहलू अनुपातें गी प्रबंधत करने आस्तै अनुपात सहायक दा उपयोग करो <object>
। इनें मददरें दा इस्तेमाल कुसै बी मानक एचटीएमएल चाइल्ड तत्व (जियां, ए <div>
जां <img>
) पर बी कीता जाई सकदा ऐ। शैलियां माता-पिता .ratio
वर्ग थमां सीधे बच्चे पर लागू कीतियां जंदियां न।
आस्पेक्ट रेशियो गी इक सस मैप च घोशित कीता जंदा ऐ ते हर वर्ग च सीएसएस चर दे राहें शामल कीता जंदा ऐ , जेह् ड़ा कस्टम आस्पेक्ट रेशियो गी बी अनुमति दिंदा ऐ .
frameborder="0"
तुसेंगी अपने एस पर
लोड़ नेईं ऐ
की जे अस रिबूट<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>
पहलू अनुपात
आस्पेक्ट रेशियो गी संशोधक वर्गें कन्नै अनुकूलित कीता जाई सकदा ऐ। डिफ़ॉल्ट रूप कन्नै निम्नलिखित अनुपात वर्ग उपलब्ध करोआए गेदे न:
<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%)
);