ଅନୁପାତ

ବିଷୟରେ

<iframe>S , <embed>s, <video>s, ଏବଂ s ପରି ବାହ୍ୟ ବିଷୟବସ୍ତୁର ଅନୁପାତ ଅନୁପାତ ପରିଚାଳନା କରିବାକୁ ଅନୁପାତ ସହାୟକକାରୀ ବ୍ୟବହାର କରନ୍ତୁ <object>| ଏହି ସହାୟକକାରୀମାନେ ଯେକ any ଣସି ମାନକ HTML ଶିଶୁ ଉପାଦାନରେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ (ଯଥା, a <div>କିମ୍ବା <img>) | ପିତାମାତା .ratioଶ୍ରେଣୀରୁ ସିଧାସଳଖ ପିଲାଙ୍କ ପାଇଁ ଶ yles ଳୀ ପ୍ରୟୋଗ କରାଯାଏ |

ଆସପେକ୍ଟ ଅନୁପାତଗୁଡିକ ଏକ ସାସ୍ ମାନଚିତ୍ରରେ ଘୋଷିତ ହୋଇଛି ଏବଂ CSS ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ପ୍ରତ୍ୟେକ ଶ୍ରେଣୀରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି, ଯାହା କଷ୍ଟମ୍ ଦିଗ ଅନୁପାତକୁ ମଧ୍ୟ ଅନୁମତି ଦେଇଥାଏ |

ଉଦାହରଣ |

ଯେକ any ଣସି ଏମ୍ବେଡ୍, ଯେପରି <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ମାନଚିତ୍ର ଅଛି | ମାନଚିତ୍ରକୁ ତୁମେ ଯେପରି ପସନ୍ଦ କର ରୂପାନ୍ତର କର ଏବଂ ବ୍ୟବହାର କରିବାକୁ ତୁମର ସାସ୍କୁ ପୁନ omp ସଂକଳନ କର |

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