अनुपात

बारे

<iframe>s, <embed>s, <video>s, र s जस्ता बाह्य सामग्रीको पक्ष अनुपात व्यवस्थापन गर्न अनुपात सहायक प्रयोग गर्नुहोस् <object>। यी सहायकहरू कुनै पनि मानक HTML बाल तत्व (जस्तै, a <div>वा <img>) मा प्रयोग गर्न सकिन्छ। शैलीहरू अभिभावक .ratioवर्गबाट ​​सीधै बच्चामा लागू हुन्छन्।

पक्ष अनुपातहरू Sass नक्सामा घोषित गरिन्छ र CSS चर मार्फत प्रत्येक वर्गमा समावेश गरिन्छ, जसले अनुकूलन पक्ष अनुपातहरूलाई पनि अनुमति दिन्छ ।

उदाहरण

कुनै पनि इम्बेड, जस्तै <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नक्सा छ। आफ्नो मनपर्ने नक्सा परिमार्जन गर्नुहोस् र तिनीहरूलाई प्रयोग गर्नको लागि आफ्नो Sass पुन: कम्पाइल गर्नुहोस्।

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);