ሬሽዮታት

ሓደ ባእታ ዝመረጽካዮ ኣስፔክት ሬሽዮ ክዕቅብ ንምግባር ዝተፈጥሩ ናይ ሓሶት ባእታታት ተ��ቐም። ኣብ ስፍሓት ወላዲ ተመርኲስካ ቪድዮ ወይ ስላይድ ሾው ምትእትታው ብመልሲ ንምሓዝ ፍጹም እዩ።

ኣብዚ ገጽ

ብዝዕባ

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

ኣስፔክት ሬሽዮታት ኣብ ሳስ ካርታ ይእወጁን ኣብ ነፍሲ ወከፍ ክፍሊ ብመንገዲ CSS ተለዋዋጢ ይካተቱን፣ እዚ ውን ብሕታዊ ኣስፔክት ሬሽዮታት የፍቅድ ።

ፕሮ-ቲፕ! ኣብ ሪቦት ንዕኡ ንሽርሽረካ ስለ ዘለና ኣብ s frameborder="0"ናትካ ኣየድልየካን ’ ዩ ። <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ካርታና እንሆ። ነቲ ካርታ ከም ድላይካ ኣዐርዮ እሞ ንሳስካ ዳግማይ ኣጠቓልሎ እሞ ኣብ ጥቕሚ ከተውዕሎ።

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