Πώς να το χρησιμοποιήσετε
- Για αλλαγή μεγέθους, εισαγάγετε την αναλογία (για παράδειγμα 16 και 9) ή επιλέξτε μια κοινή και πληκτρολογήστε πλάτος ή ύψος. Η άλλη πλευρά υπολογίζεται.
- Για να βρείτε μια αναλογία, εισαγάγετε το πλάτος και το ύψος μιας εικόνας, οθόνης ή βίντεο.
- Ελέγξτε την προεπισκόπηση και αντιγράψτε τον κανόνα CSS aspect-ratio αν τον χρειάζεστε για μια διάταξη ιστοσελίδας.
Πώς λειτουργεί
Η αναλογική αλλαγή μεγέθους χρησιμοποιεί ύψος = πλάτος × ύψος αναλογίας ÷ πλάτος αναλογίας (και το αντίστροφο). Τα μεγέθη σε pixel είναι συνήθως ακέραιοι αριθμοί, οπότε το αποτέλεσμα μπορεί να στρογγυλοποιηθεί· όταν μια αναλογία δεν διαιρείται ακριβώς, όπως 16:9 σε πλάτος 1000, το στρογγυλοποιημένο ύψος (563) είναι μια κοντινή προσέγγιση και όχι ακριβής αντιστοιχία.
Μια ανάλυση απλοποιείται διαιρώντας τις δύο πλευρές με τον μέγιστο κοινό διαιρέτη τους: το 1920 και το 1080 έχουν κοινό διαιρέτη το 120, δίνοντας 16:9. Ορισμένες πραγματικές αναλύσεις δεν ανάγονται σε γνωστή αναλογία. Το 1366×768 είναι ακριβώς 683:384, που είναι πολύ κοντά στο 16:9, επομένως το εργαλείο εμφανίζει επίσης την πλησιέστερη κοινή αναλογία όταν βρίσκεται εντός 2%. Ομοίως, οι οθόνες «21:9» είναι στην πραγματικότητα 64:27 (2560×1080) ή 43:18 (3440×1440)· το 21:9 είναι εμπορική ονομασία.
Στο CSS, το aspect-ratio: 16 / 9 κάνει ένα στοιχείο να διατηρεί αυτό το σχήμα καθώς αλλάζει το πλάτος του, κάτι που είναι χρήσιμο για ενσωματωμένα βίντεο και placeholders εικόνων που δεν πρέπει να μετατοπίζουν τη διάταξη κατά τη φόρτωση.
Παραδείγματα
Μέγεθος μικρογραφίας βίντεο
Μια μικρογραφία 16:9 που πρέπει να έχει πλάτος 1280 pixel χρειάζεται ύψος 720 pixel.
Αναγνώριση αναλογίας οθόνης
Το 2560×1600 απλοποιείται σε 8:5, που είναι το ίδιο με το 16:10, συνηθισμένο σε φορητούς υπολογιστές.
Κατακόρυφη περικοπή για κοινωνικά δίκτυα
Με αναλογία 4:5 και πλάτος 1080, το ύψος είναι 1350, ένα κατακόρυφο μέγεθος που δέχονται πολλές ροές.
Συχνές ερωτήσεις
Είναι το 16:9 ίδιο με το 1,78:1;
Ναι. 16 ÷ 9 ≈ 1,778, επομένως τα δύο περιγράφουν το ίδιο σχήμα. Οι κινηματογραφικές μορφές δίνονται συχνά ως δεκαδικοί, όπως 2,39:1.
Γιατί το αποτέλεσμά μου έχει δεκαδικά;
Δεν διαιρείται ακριβώς κάθε πλάτος με την αναλογία. Ενεργοποιήστε τη στρογγυλοποίηση για μεγέθη σε pixel· το αποτέλεσμα είναι τότε το πλησιέστερο ακέραιο pixel, το οποίο μπορεί να απέχει ένα κλάσμα του pixel από την ακριβή αναλογία.
Λειτουργεί η ιδιότητα aspect-ratio της CSS παντού;
Υποστηρίζεται σε όλους τους σύγχρονους κύριους περιηγητές. Αν ένα στοιχείο έχει επίσης ρητά ορισμένο πλάτος και ύψος, αυτά έχουν προτεραιότητα έναντι του aspect-ratio.
Απόρρητο
Όλοι οι υπολογισμοί εκτελούνται στο πρόγραμμα περιήγησής σας. Τίποτα δεν αποστέλλεται ούτε αποθηκεύεται.