in English

Αναλογίες

Χρησιμοποιήστε ψευδοστοιχεία που δημιουργούνται για να κάνετε ένα στοιχείο να διατηρεί την αναλογία διαστάσεων της επιλογής σας. Ιδανικό για το χειρισμό με απόκριση ενσωματώσεων βίντεο ή παρουσίασης με βάση το πλάτος του γονέα.

Σε αυτήν την σελίδα

Σχετικά με

Χρησιμοποιήστε τη βοήθεια αναλογίας για να διαχειριστείτε τις αναλογίες διαστάσεων εξωτερικού περιεχομένου όπως <iframe>s, <embed>s, <video>s και <object>s. Αυτοί οι βοηθοί μπορούν επίσης να χρησιμοποιηθούν σε οποιοδήποτε τυπικό θυγατρικό στοιχείο HTML (π.χ. a <div>ή <img>). Τα στυλ εφαρμόζονται από την .ratioτάξη των γονέων απευθείας στο παιδί.

Οι λόγοι διαστάσεων δηλώνονται σε έναν χάρτη Sass και περιλαμβάνονται σε κάθε κλάση μέσω της μεταβλητής CSS, η οποία επιτρέπει επίσης προσαρμοσμένες αναλογίες διαστάσεων .

Pro-Tip! Δεν χρειάζεστε frameborder="0"στο δικό σας <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

16Χ9

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>

This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.

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

4x3, then 2x1

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

Sass map

Within _variables.scss, you can change the aspect ratios you want to use. Here’s our default $ratio-aspect-ratios map. Modify the map as you like and recompile your Sass to put them to use.

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