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.
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 .ratio
class 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 .
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 .ratio
leh aspect ratio class nen wrap rawh. Kan universal selector vang hian immediate child element chu automatic in a size a .ratio > *
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:
<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 thenkhat nen custom aspect ratios on the fly i siam thei ang.
Entirnan, 2x1 aspect ratio siam tur --bs-aspect-ratio: 50%
chuan .ratio
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass map a ni
, chhungah _variables.scss
chuan aspect ratio i hman duh te chu i thlak thei ang. Hetah hian kan default $ratio-aspect-ratios
map 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%)
);