অনুপাত

বিষয়ে

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