अनुपात

बारे

<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%)
);