Η ιδιότητα 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
ξεκινά σιωπηρά για να ορίσει τις διαστάσεις του στοιχείου.
Αλλάζει όταν 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
μόνο δεν θα σπάσει την αναλογία διαστάσεων του στοιχείου.
Κάνει senes, σωστά; Εάν χρησιμοποιείτε κάποιο από τα δύο width
ή height
αναγκάσετε aspect-ratio
να χρησιμοποιήσετε αυτήν την τιμή στον υπολογισμό, τότε λογικά προκύπτει ότι η χρήση και των δύο θα αντικατασταθεί aspect-ratio
εντελώς, καθώς και οι δύο τιμές έχουν ήδη παρασχεθεί και ρυθμιστεί.
Όταν το περιεχόμενο ξεπερνά την αναλογία
Με απλά λόγια, εάν έχετε ένα στοιχείο με αναλογία διαστάσεων και το περιεχόμενο είναι τόσο μεγάλο που αναγκάζει το στοιχείο να επεκταθεί, τότε το στοιχείο θα επεκταθεί. Και αν το στοιχείο επεκταθεί, οι διαστάσεις του αλλάζουν και, συνεπώς, δεν υπάρχει πλέον λόγος διαστάσεων. Αυτός είναι ο λόγος για τον οποίο η προδιαγραφή λέει ότι η ιδιότητα ορίζει την «προτιμώμενη» αναλογία διαστάσεων. Προτιμάται, αλλά δεν συνταγογραφείται.
Δεν σας αρέσει πώς λειτουργεί; Η ρύθμιση min-height: 0;
του στοιχείου θα επιτρέψει στο περιεχόμενο να ξεχειλίσει τον προτιμώμενο λόγο διαστάσεων αντί να το επεκτείνει.
Όταν «χάνει» 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
να πάει κάτω από μια συγκεκριμένη τιμή, είτε αγνοείται επειδή το width
set έχει ήδη ορίσει το στοιχείο πέρα από το ελάχιστο πλάτος που πρέπει να είναι. Το ίδιο ισχύει 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 |
---|---|---|---|---|
Οχι | Οχι | Οχι | Οχι | Οχι |
1 Μπορεί να ενεργοποιηθεί ρυθμίζοντας
layout.css.aspect-ratio.enabled
σε true
.2 Υποστήριξη για μπλοκ και αντικατασταθέντα στοιχεία που εισήχθησαν στον Firefox 81.
3 Υποστήριξη για ευέλικτα στοιχεία που εισήχθησαν στον Firefox 83.
4 Μπορεί να ενεργοποιηθεί ρυθμίζοντας
#enable-experimental-web-platform-features
σε Ενεργοποίηση.5 Διατίθεται στην προεπισκόπηση τεχνολογίας Safari 118.