ગુણોત્તર

વિશે

<iframe>s, <embed>s, <video>s અને s જેવા બાહ્ય સામગ્રીના પાસા રેશિયોનું સંચાલન કરવા માટે રેશિયો હેલ્પરનો ઉપયોગ કરો <object>. આ સહાયકોનો ઉપયોગ કોઈપણ પ્રમાણભૂત HTML ચાઈલ્ડ એલિમેન્ટ (દા.ત., a <div>અથવા <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>

Sass નકશો

ની અંદર _variables.scss, તમે ઉપયોગ કરવા માંગો છો તે પાસા રેશિયો બદલી શકો છો. અમારો ડિફૉલ્ટ $ratio-aspect-ratiosનકશો અહીં છે. તમને ગમે તે રીતે નકશામાં ફેરફાર કરો અને તમારા સાસને ઉપયોગમાં લેવા માટે તેને ફરીથી કમ્પાઇલ કરો.

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