ଅନୁପାତ
ଏକ ଉପାଦାନକୁ ତୁମର ପସନ୍ଦର ଅନୁପାତ ବଜାୟ ରଖିବା ପାଇଁ ଉତ୍ପାଦିତ ଛଉ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କର | ପିତାମାତାଙ୍କ ମୋଟେଇ ଉପରେ ଆଧାର କରି ଭିଡିଓ କିମ୍ବା ସ୍ଲାଇଡ୍ ଶୋ ଏମ୍ବେଡ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ପରିଚାଳନା କରିବା ପାଇଁ ଉପଯୁକ୍ତ |
ବିଷୟରେ
<iframe>
S , <embed>
s, <video>
s, ଏବଂ s ପରି ବାହ୍ୟ ବିଷୟବସ୍ତୁର ଅନୁପାତ ଅନୁପାତ ପରିଚାଳନା କରିବାକୁ ଅନୁପାତ ସହାୟକକାରୀ ବ୍ୟବହାର କରନ୍ତୁ <object>
| ଏହି ସହାୟକକାରୀମାନେ ଯେକ any ଣସି ମାନକ HTML ଶିଶୁ ଉପାଦାନରେ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ (ଯଥା, a <div>
କିମ୍ବା <img>
) | ପିତାମାତା .ratio
ଶ୍ରେଣୀରୁ ସିଧାସଳଖ ପିଲାଙ୍କ ପାଇଁ ଶ yles ଳୀ ପ୍ରୟୋଗ କରାଯାଏ |
ଆସପେକ୍ଟ ଅନୁପାତଗୁଡିକ ଏକ ସାସ୍ ମାନଚିତ୍ରରେ ଘୋଷିତ ହୋଇଛି ଏବଂ CSS ଭେରିଏବଲ୍ ମାଧ୍ୟମରେ ପ୍ରତ୍ୟେକ ଶ୍ରେଣୀରେ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି, ଯାହା କଷ୍ଟମ୍ ଦିଗ ଅନୁପାତକୁ ମଧ୍ୟ ଅନୁମତି ଦେଇଥାଏ |
frameborder="0"
ତୁମର s ରେ ତୁମର
ଆବଶ୍ୟକତା ନାହିଁ
ଯେହେତୁ ଆମେ ତୁମ ପାଇଁ ପୁନ o ବୁଟ୍<iframe>
ରେ ଏହାକୁ ନବଲିଖନ କରୁ
|
ଉଦାହରଣ |
ଯେକ 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%)
);