Λόγος διαστάσεων - CSS-Κόλπα

Anonim

Η ιδιότητα CSS aspect-ratioσάς επιτρέπει να δημιουργείτε πλαίσια που διατηρούν αναλογικές διαστάσεις όπου το heightκαι widthένα πλαίσιο υπολογίζονται αυτόματα ως αναλογία. Είναι λίγο μαθηματικό, αλλά η ιδέα είναι ότι μπορείτε να διαιρέσετε τη μία τιμή από την άλλη σε αυτήν την ιδιότητα και η υπολογισμένη τιμή διασφαλίζει ότι ένα πλαίσιο παραμένει σε αυτό το ποσοστό.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioορίζεται στην προδιαγραφή CSS Box Sizing Module Level 4, η οποία βρίσκεται επί του παρόντος στο Προσχέδιο Εργασίας. Αυτό σημαίνει ότι είναι ακόμη σε εξέλιξη και έχει την πιθανότητα να αλλάξει. Αλλά με το Chrome και τον Firefox να το υποστηρίζουν πίσω από μια πειραματική σημαία και το Safari Technology Preview να προσθέτει υποστήριξη για αυτό στις αρχές του 2021, υπάρχουν ισχυρά σήματα που aspect-ratioκερδίζουν πολύ δυναμική.

Σύνταξη

aspect-ratio: auto || ;

Στην απλή αγγλική γλώσσα: aspect-ratioείτε θεωρείται ως autoπροεπιλογή, είτε δέχεται ως τιμή όπου .

  • Αρχική τιμή: auto
  • Ισχύει για: όλα τα στοιχεία εκτός από τα ενσωματωμένα κουτιά και τα εσωτερικά ρουμπίνια ή τα πλαίσια τραπεζιού
  • Κληρονομική: όχι
  • Ποσοστά: n / a
  • Υπολογισμένη τιμή: καθορισμένη λέξη-κλειδί ή ζεύγος αριθμών
  • Τύπος κινούμενης εικόνας: διακριτός

Αξίες

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Λειτουργεί σε περιεχόμενο που έχει αντικατασταθεί και δεν έχει αντικατασταθεί

Αν σκέφτεστε, "Ναι, δεν το κάνει ήδη το πρόγραμμα περιήγησης για εμάς σε εικόνες;" η απάντηση είναι: απολύτως . Τα προγράμματα περιήγησης κάνουν μερικούς υπολογισμούς αναλογίας διαστάσεων για το περιεχόμενο που αντικαθίσταται όπως εικόνες Έτσι, εάν μια εικόνα έχει, για παράδειγμα, πλάτος 500px, το πρόγραμμα περιήγησης κάμπτει τους αλγόριθμους διάταξης CSS για να διατηρήσει τις εγγενείς ή «φυσικές» διαστάσεις της εικόνας. Το aspect-ratioακίνητο μπορεί να χρησιμοποιηθεί για να παρακάμψει αποτελεσματικά αυτές τις φυσικές διαστάσεις.

Όμως το περιεχόμενο που δεν αντικαθίσταται δεν έχει φυσική αναλογία. Αυτά είναι τα περισσότερα από τα οποία δουλεύουμε, όπως τα div. Αντί να προσπαθήσουμε να διατηρήσουμε τις φυσικές αναλογίες του στοιχείου, aspect-ratioθέτει ένα «προτιμώμενο» μέγεθος.

Τώρα, η προδιαγραφή σημειώνει επί του παρόντος ότι οι παλαιότερες προδιαγραφές CSS, ιδίως το CSS 2.1, δεν περιέχουν σαφή διάκριση μεταξύ του αντικατασταθέντος και του μη αντικατεστημένου περιεχομένου. Αυτό σημαίνει ότι θα μπορούσαμε να δούμε κάποιες πρόσθετες ειδικές περιπτώσεις που προστέθηκαν στις προδιαγραφές για να τις διευκρινίσουμε. Προς το παρόν, βλέπουμε τα προγράμματα περιήγησης να διαθέτουν υποστήριξη για τον καθορισμό προτιμώμενων αναλογιών διαστάσεων σε αντικατεστημένα και μη αντικατασταθέντα ξεχωριστά, όπου ορισμένα από τα προγράμματα περιήγησης με πρώιμη υποστήριξη πίσω από μια πειραματική σημαία ενδέχεται να υποστηρίζουν μόνο aspect-ratioγια μη αντικατεστημένο περιεχόμενο. Σίγουρα αξίζει να παρακολουθείτε την υποστήριξη του προγράμματος περιήγησης καθώς εξελίσσεται.

Λειτουργεί μόνη της χωρίς να προσδιορίζει ένα widthήheight

Λοιπόν, ναι, μπορούμε απλά να το ρίξουμε σε ένα στοιχείο σαν αυτό:

.element ( aspect-ratio: 16 / 9; )

… Και το προεπιλεγμένο στοιχείο width: autoξεκινά σιωπηρά για να ορίσει τις διαστάσεις του στοιχείου.

Δείτε ζωντανή επίδειξη στο CodePen

Αλλάζει όταν widthή heightβρίσκονται στο ίδιο στοιχείο

Ας πούμε ότι έχουμε ένα στοιχείο με το πλάτος 300pxκαι aspect-ratioτης 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Από τη φύση του, aspect-ratioθέλει να υπολογίσει από μόνη της τις διαστάσεις του στοιχείου και θα το κάνει βάσει του περιβάλλοντος στο οποίο χρησιμοποιείται. Αλλά με αυτό που widthπετιέται, λέει ο λόγος διαστάσεων για τον υπολογισμό του πλαισίου λόγου διαστάσεων του στοιχείου χρησιμοποιώντας 300pxως πλάτος. Ως αποτέλεσμα, είναι σαν να γράφουμε:

.element ( height: 100px; width: 300px; )

Αυτό βγάζει νόημα! Θυμηθείτε, όταν δεν υπάρχει widthή heightκαθορίζεται, το πρόγραμμα περιήγησης υποθέτει ότι είναι autoκαι πηγαίνει από εκεί. Όταν παρέχουμε ρητές widthκαι heightτιμές, αυτές είναι που χρησιμοποιούνται.

Αγνοείται σε ορισμένες περιπτώσεις

Αυτό είναι όπου τα πράγματα γίνονται λίγο μυαλό γιατί υπάρχουν περιπτώσεις όπου aspect-ratioπαραβλέπεται ή οι υπολογισμοί τους επηρεάζονται από άλλες ιδιότητες. Που περιλαμβάνει:

Όταν widthκαι τα δύο και heightδηλώνονται στο στοιχείο

Εμείς απλά είδε πόσο δηλώνοντας είτε widthή heightκαι να στοιχείου θα επηρεάσουν τον υπολογισμό του aspect-ratio. Αλλά αν το στοιχείο έχει ήδη ένα widthκαι height, αυτά χρησιμοποιούνται αντί για aspect-ratio. Απαιτεί την παράκαμψη aspect-ratioκαι των δύο ιδιοτήτων . Η ρύθμιση ενός heightή widthμόνο δεν θα σπάσει την αναλογία διαστάσεων του στοιχείου.

aspect-ratioαγνοείται όταν widthκαι τα δύο και heightρυθμίζονται στο ίδιο στοιχείο.

Κάνει senes, σωστά; Εάν χρησιμοποιείτε κάποιο από τα δύο widthή heightαναγκάσετε aspect-ratioνα χρησιμοποιήσετε αυτήν την τιμή στον υπολογισμό, τότε λογικά προκύπτει ότι η χρήση και των δύο θα αντικατασταθεί aspect-ratioεντελώς, καθώς και οι δύο τιμές έχουν ήδη παρασχεθεί και ρυθμιστεί.

Όταν το περιεχόμενο ξεπερνά την αναλογία

Με απλά λόγια, εάν έχετε ένα στοιχείο με αναλογία διαστάσεων και το περιεχόμενο είναι τόσο μεγάλο που αναγκάζει το στοιχείο να επεκταθεί, τότε το στοιχείο θα επεκταθεί. Και αν το στοιχείο επεκταθεί, οι διαστάσεις του αλλάζουν και, συνεπώς, δεν υπάρχει πλέον λόγος διαστάσεων. Αυτός είναι ο λόγος για τον οποίο η προδιαγραφή λέει ότι η ιδιότητα ορίζει την «προτιμώμενη» αναλογία διαστάσεων. Προτιμάται, αλλά δεν συνταγογραφείται.

Δεν σας αρέσει πώς λειτουργεί; Η ρύθμιση min-height: 0;του στοιχείου θα επιτρέψει στο περιεχόμενο να ξεχειλίσει τον προτιμώμενο λόγο διαστάσεων αντί να το επεκτείνει.

Δείτε ζωντανή επίδειξη στο CodePen

Όταν «χάνει» min-*και max-*ιδιότητες

Απλώς είδαμε πώς λειτουργεί, έτσι; Όταν το περιεχόμενο υπερβαίνει τις διαστάσεις του πλαισίου, το περιεχόμενο aspect-ratioεξαφανίζεται επειδή το πλαίσιο επεκτείνεται με το περιεχόμενο. Μπορούμε να το παρακάμψουμε με min-width: 0.

Αυτό συμβαίνει επειδή όλα τα χαρακτηριστικά min-*και οι max-*ιδιότητες συνήθως μάχονται widthκαι heightγια υπεροχή στον πόλεμο για τους υπολογισμούς Box Model. Για παράδειγμα:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Αλλά:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Αυτό συμβαίνει διότι min-widthείτε εμποδίζει widthνα πάει κάτω από μια συγκεκριμένη τιμή, είτε αγνοείται επειδή το widthset έχει ήδη ορίσει το στοιχείο πέρα ​​από το ελάχιστο πλάτος που πρέπει να είναι. Το ίδιο ισχύει min-heightκαι max-width, και max-height.

Το σημείο όλων αυτών: αν θέσουμε και το α min-*ή το max-*ακίνητο στο ίδιο στοιχείο όπως aspect-ratioκαι "κερδίσουν" widthή height, τότε αυτά θα παρακάμψουν aspect-ratio. Σας είπα ότι ήταν λίγο μυαλό. ?

Υποστήριξη προγράμματος περιήγησης

ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι Οχι 86 1.2,3 90 4 TP 5 Οχι
Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mobile
Οχι Οχι Οχι Οχι Οχι
Πηγή: caniuse
1 Μπορεί να ενεργοποιηθεί ρυθμίζοντας layout.css.aspect-ratio.enabledσε true.
2 Υποστήριξη για μπλοκ και αντικατασταθέντα στοιχεία που εισήχθησαν στον Firefox 81.
3 Υποστήριξη για ευέλικτα στοιχεία που εισήχθησαν στον Firefox 83.
4 Μπορεί να ενεργοποιηθεί ρυθμίζοντας #enable-experimental-web-platform-featuresσε Ενεργοποίηση.
5 Διατίθεται στην προεπισκόπηση τεχνολογίας Safari 118.

Περισσότερες πληροφορίες

Άρθρο την 1η Ιουλίου 2020

Μια πρώτη ματιά στο «λόγος διαστάσεων»

Σάρα Κόπε