Αναλογίες

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

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

Σχετικά με

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

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

Pro-Tip! Δεν χρειάζεστε frameborder="0"στο δικό σας <iframe>, καθώς το παρακάμπτουμε για εσάς στην Επανεκκίνηση .

Παράδειγμα

Αναδιπλώστε οποιαδήποτε ενσωμάτωση, όπως ένα <iframe>, σε ένα γονικό στοιχείο με .ratioκαι μια κλάση αναλογίας διαστάσεων. Το άμεσο παιδί διαμορφώνεται αυτόματα χάρη στον γενικό επιλογέα μας .ratio > *.

html

<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

html

<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

html

<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

html

<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%)
);