অনুপাত

সম্পর্কিত

<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>

Sass মানচিত্র

এর মধ্যে _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%)
);