Ratios te pawh a awm

Element pakhatin i duh ang aspect ratio a vawng reng theih nan generated pseudo elements hmang ang che. Nu leh pa zau zawng a zirin video emaw slideshow embed emaw responsive taka enkawl nan a tha ber.

He page ah hian

Lam

<iframe>External content s, <embed>s, <video>s, leh s ang chi aspect ratio te enkawl nan ratio helper hmang ang che <object>. Heng helper te hi standard HTML child element eng pawh (eg, a <div>or <img>) ah pawh hman theih a ni bawk. Styles hi nu leh pa .ratioclass atanga naupang hnenah direct-in hman a ni.

Aspect ratio te hi Sass map-ah puan a ni a, class tinah CSS variable hmangin dah tel a ni a, chu chuan custom aspect ratio pawh a phalsak bawk .

Pro-Tip a ni! frameborder="0"I s ah i mamawh lo a , chu chu Reboot<iframe> ah kan override che a ni.

Entirna

Embed eng pawh, , ang chi, <iframe>parent element-ah .ratioleh aspect ratio class nen wrap rawh. Kan universal selector vang hian immediate child element chu automatic in a size a .ratio > *ni .

html tih a ni

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

Aspect ratio te pawh a awm

Aspect ratio te hi modifier class hmangin a duh angin a siam thei bawk. Default-ah chuan a hnuaia ratio class te hi pek a ni:

1x1 a ni

4x3 a ni

16x9 a ni

21x9 a ni

html tih a ni

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

Custom ratio te pawh a awm

Class tin hian .ratio-*selector-ah CSS custom property (or CSS variable) an dah vek a. He CSS variable hi override la, i lam atanga quick math engemaw zat hmangin custom aspect ratios on the fly i siam thei ang.

Entirnan, 2x1 aspect ratio siam tur --bs-aspect-ratio: 50%chuan .ratio.

2x1 a ni

html tih a ni

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

He CSS variable hian breakpoint hrang hranga aspect ratio siam danglam a awlsam phah a ni. A hnuaia mi hi 4x3 tan a ni a, mahse medium breakpoint-ah chuan custom 2x1-ah a inthlak a ni.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, chutah 2x1 a ni

html tih a ni

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Sass map a ni

, chhungah _variables.scsschuan aspect ratio i hman duh te chu i thlak thei ang. Hetah hian kan default $ratio-aspect-ratiosmap chu a awm. Map chu i duh angin siam danglam la, i Sass chu hman theih turin recompile leh rawh.

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