अनुपात
कोनो तत्व क॑ अपनऽ पसंद केरऽ पहलू अनुपात क॑ बनाए रखै लेली जेनरेट करलऽ गेलऽ छद्म तत्वऽ के प्रयोग करलऽ जाय । अभिभावक कें चौड़ाई कें आधार पर वीडियो या स्लाइड शो एम्बेड कें प्रतिक्रियाशील रूप सं संभालनाय कें लेल एकदम सही.
विषय में
<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>
पहलू अनुपात
आस्पेक्ट रेशियो कें संशोधक वर्गक कें साथ अनुकूलित कैल जा सकय छै. डिफ़ॉल्ट रूप सं निम्नलिखित अनुपात वर्ग उपलब्ध करायल गेल छै:
<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>
इ सीएसएस चर ब्रेकपॉइंट कें पार आस्पेक्ट रेशियो कें संशोधित करनाय आसान बनायत छै. निम्नलिखित शुरू करय लेल 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%)
);