ሬሽዮታት

ብዝዕባ

<iframe>ናይ ደገ ትሕዝቶ ከም s, <embed>s, <video>s, ከምኡውን s ዝኣመሰሉ ኣስፔክት ሬሽዮታት ንምምሕዳር ነቲ ሬሽዮ ሓጋዚ ተጠቐም <object>። <div>እዞም ሓገዝቲ ኣብ ዝኾነ መደበኛ HTML ውላድ ባእታ (ንኣብነት፡ a ወይ <img>) እውን ክጥቀሙ ይኽእሉ እዮም ። .ratioቅዲታት ካብ ወላዲ ክፍሊ ብቐጥታ ናብቲ ቆልዓ ይትግበሩ ።

ኣስፔክት ሬሽዮታት ኣብ ሳስ ካርታ ይእወጁን ኣብ ነፍሲ ወከፍ ክፍሊ ብመንገዲ 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>

ሳስ ካርታ

ኣብ ውሽጢ _variables.scss፡ ክትጥቀመሉ እትደሊ ኣስፔክት ሬሽዮ ክትቅይር ትኽእል ኢኻ። ነባሪ $ratio-aspect-ratiosካርታና እንሆ። ነቲ ካርታ ከም ድላይካ ኣዐርዮ እሞ ንሳስካ ዳግማይ ኣጠቓልሎ እሞ ኣብ ጥቕሚ ከተውዕሎ።

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