ਅਨੁਪਾਤ

ਕਿਸੇ ਤੱਤ ਨੂੰ ਆਪਣੀ ਚੋਣ ਦੇ ਪੱਖ ਅਨੁਪਾਤ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਤਿਆਰ ਕੀਤੇ ਸੂਡੋ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਮਾਤਾ-ਪਿਤਾ ਦੀ ਚੌੜਾਈ ਦੇ ਆਧਾਰ 'ਤੇ ਵੀਡੀਓ ਜਾਂ ਸਲਾਈਡਸ਼ੋ ਏਮਬੈੱਡਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਢੰਗ ਨਾਲ ਸੰਭਾਲਣ ਲਈ ਸੰਪੂਰਨ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਬਾਰੇ

<iframe>ਬਾਹਰੀ ਸਮੱਗਰੀ ਜਿਵੇਂ ਕਿ s, <embed>s, <video>s, ਅਤੇ s ਦੇ ਆਕਾਰ ਅਨੁਪਾਤ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ ਅਨੁਪਾਤ ਸਹਾਇਕ ਦੀ ਵਰਤੋਂ ਕਰੋ <object>। <div>ਇਹ ਸਹਾਇਕ ਕਿਸੇ ਵੀ ਮਿਆਰੀ HTML ਚਾਈਲਡ ਐਲੀਮੈਂਟ (ਜਿਵੇਂ ਕਿ, a ਜਾਂ <img>) 'ਤੇ ਵੀ ਵਰਤੇ ਜਾ ਸਕਦੇ ਹਨ । ਸਟਾਈਲ ਨੂੰ ਮਾਤਾ-ਪਿਤਾ .ratioਵਰਗ ਤੋਂ ਸਿੱਧੇ ਬੱਚੇ 'ਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਆਕਾਰ ਅਨੁਪਾਤ ਨੂੰ ਇੱਕ Sass ਨਕਸ਼ੇ ਵਿੱਚ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ CSS ਵੇਰੀਏਬਲ ਰਾਹੀਂ ਹਰੇਕ ਕਲਾਸ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਕਸਟਮ ਆਕਾਰ ਅਨੁਪਾਤ ਦੀ ਵੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ।

ਪ੍ਰੋ-ਟਿਪ! frameborder="0"ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ s ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਰੀਬੂਟ<iframe> ਵਿੱਚ ਤੁਹਾਡੇ ਲਈ ਓਵਰਰਾਈਡ ਕਰਦੇ ਹਾਂ ।

ਉਦਾਹਰਨ

ਕਿਸੇ ਵੀ ਏਮਬੇਡ ਨੂੰ ਸਮੇਟਣਾ, ਜਿਵੇਂ ਕਿ <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>

ਆਕਾਰ ਅਨੁਪਾਤ

ਆਕਾਰ ਅਨੁਪਾਤ ਨੂੰ ਸੋਧਕ ਕਲਾਸਾਂ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਹੇਠ ਲਿਖੀਆਂ ਅਨੁਪਾਤ ਸ਼੍ਰੇਣੀਆਂ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ:

1x1

4x3

16x9

21x9

<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

<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

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

Sass ਨਕਸ਼ਾ

ਦੇ ਅੰਦਰ _variables.scss, ਤੁਸੀਂ ਉਹਨਾਂ ਪੱਖ ਅਨੁਪਾਤ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਸਾਡਾ ਪੂਰਵ-ਨਿਰਧਾਰਤ $ratio-aspect-ratiosਨਕਸ਼ਾ ਹੈ। ਆਪਣੀ ਮਰਜ਼ੀ ਅਨੁਸਾਰ ਨਕਸ਼ੇ ਨੂੰ ਸੋਧੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਵਰਤਣ ਲਈ ਆਪਣੇ Sass ਨੂੰ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰੋ।

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