අනුපාත

මූලද්‍රව්‍යයක් ඔබ තෝරා ගැනීමේ දර්ශන අනුපාතය පවත්වා ගැනීමට උත්පාදනය කරන ලද ව්‍යාජ මූලද්‍රව්‍ය භාවිතා කරන්න. දෙමාපියන්ගේ පළල මත පදනම්ව වීඩියෝ හෝ විනිවිදක කාවැද්දීම් ප්‍රතිචාරාත්මක ලෙස හැසිරවීමට පරිපූර්ණයි.

මෙම පිටුවේ

ගැන

<iframe>s, <embed>s, <video>s, සහ s වැනි බාහිර අන්තර්ගතයේ දර්ශන අනුපාත කළමනාකරණය කිරීමට අනුපාත සහායකය භාවිතා කරන්න <object>. මෙම උපකාරකයින් ඕනෑම සම්මත HTML ළමා මූලද්‍රව්‍යයක් මතද භාවිතා කළ හැක (උදා, a <div>හෝ <img>). ශෛලීන් මාපිය .ratioපන්තියේ සිට කෙලින්ම දරුවාට යොදනු ලැබේ.

දර්ශන අනුපාත Sass සිතියමක ප්‍රකාශ කර ඇති අතර CSS විචල්‍යය හරහා එක් එක් පන්තියට ඇතුළත් කර ඇති අතර එමඟින් අභිරුචි දර්ශන අනුපාත ද ඉඩ සලසයි .

Pro-Tip! නැවත පණගැන්වීමේදී අපි ඔබ වෙනුවෙන් එය අභිබවා යන බැවින් ඔබට frameborder="0"ඔබගේ s මත අවශ්‍ය නොවේ . <iframe>

උදාහරණයක්

දර්ශන අනුපාත පන්තියක් <iframe>සහිත මාපිය මූලද්‍රව්‍යයක් වැනි ඕනෑම කාවැද්දුමක් ඔතා . .ratioඅපගේ විශ්ව තේරීම්කාරකයට ස්තූතිවන්ත වන පරිදි ක්ෂණික ළමා මූලද්‍රව්‍යය ස්වයංක්‍රීයව විශාල වේ .ratio > *.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

දර්ශන අනුපාත

දර්ශන අනුපාත වෙනස් කිරීමේ පන්ති සමඟ අභිරුචිකරණය කළ හැක. පෙරනිමියෙන් පහත අනුපාත පන්ති සපයනු ලැබේ:

1x1

4x3

16x9

21x9

html

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

2x1

html

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

4x3, පසුව 2x1

html

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