Αριθμομηχανή αναλογίας διαστάσεων (Aspect Ratio)

Πώς να χρησιμοποιήσετε την αριθμομηχανή αναλογίας διαστάσεων

1. Επιλέξτε μία από τις Συνηθισμένες αναλογίες (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5) ή πληκτρολογήστε τις δικές σας τιμές στο Αναλογία ή αρχικό μέγεθος. Μπορείτε να εισαγάγετε μια αναλογία (16 και 9) ή τις πραγματικές διαστάσεις μιας εικόνας, ενός βίντεο ή μιας οθόνης (1920 και 1080).
2. Διαβάστε τα αποτελέσματα: την Απλοποιημένη αναλογία, τη Δεκαδική αναλογία (πλάτος διά ύψος), τον Προσανατολισμό και το Πλησιέστερο πρότυπο. Το σύμβολο «≈» σημαίνει ότι το μέγεθός σας πλησιάζει αυτό το πρότυπο, αλλά δεν είναι ακριβώς ίδιο.
3. Στο Νέο μέγεθος (διατηρεί την αναλογία) πληκτρολογήστε ένα Νέο πλάτος για να βρείτε το αντίστοιχο ύψος ή ένα Νέο ύψος για να βρείτε το πλάτος. Η γραμμή από κάτω δείχνει τον υπολογισμό. Αποεπιλέξτε το Στρογγυλοποίηση σε ακέραια εικονοστοιχεία αν χρειάζεστε την ακριβή τιμή, για παράδειγμα για μεγέθη εκτύπωσης σε χιλιοστά.
4. Το Εναλλαγή πλάτους και ύψους μετατρέπει μια οριζόντια αναλογία σε κάθετη (το 16:9 γίνεται 9:16) και αντίστροφα.
5. Η Προεπισκόπηση σχεδιάζει ένα πλαίσιο με την αναλογία σας και ο πίνακας απαριθμεί το μέγεθος κάθε συνηθισμένης αναλογίας για το νέο σας πλάτος.
6. Αντιγράψτε τον Κώδικας CSS με το κουμπί Αντιγραφή.

Πώς γίνεται ο υπολογισμός

Η αναλογία διαστάσεων είναι το πλάτος διά το ύψος, γραμμένο ως δύο ακέραιοι αριθμοί. Για να την απλοποιήσει, το εργαλείο διαιρεί και τις δύο πλευρές με τον μέγιστο κοινό διαιρέτη (ΜΚΔ): ο ΜΚΔ των 1920 και 1080 είναι 120, άρα 1920:1080 = 16:9. Οι δεκαδικές τιμές πολλαπλασιάζονται πρώτα με μια δύναμη του δέκα (το 2,39:1 γίνεται 239:100).

Για να αλλάξετε μέγεθος διατηρώντας τις αναλογίες, εφαρμόζεται απλή μέθοδος των τριών:

• νέο ύψος = νέο πλάτος × αρχικό ύψος ÷ αρχικό πλάτος
• νέο πλάτος = νέο ύψος × αρχικό πλάτος ÷ αρχικό ύψος

Παράδειγμα: ένα βίντεο 16:9 με πλάτος 1280 px έχει ύψος 1280 × 9 ÷ 16 = 720 px.

Ορισμένες οθόνες έχουν «περίεργες» αναλογίες. Ένας φορητός υπολογιστής 1366 × 768 απλοποιείται σε 683:384, δηλαδή 1,779:1, ελάχιστα μακριά από το 16:9 (1,778:1), γι’ αυτό εμφανίζεται «≈ 16:9». Οι οθόνες που πωλούνται ως 21:9 είναι στην πραγματικότητα 64:27 (2560 × 1080) ή 43:18 (3440 × 1440), γι’ αυτό και οι δύο εμφανίζονται στον πίνακα.

Η ιδιότητα CSS aspect-ratio

Το aspect-ratio: 16 / 9; ζητά από το πρόγραμμα περιήγησης να υπολογίσει τη διάσταση που λείπει: με width: 100%, το ύψος προκύπτει αυτόματα και το πλαίσιο κλιμακώνεται μαζί με το περιέχον στοιχείο. Λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης (από το 2021) και είναι ιδανική για ενσωματωμένα βίντεο, κάρτες, κράτηση θέσης για εικόνες και μικρογραφίες. Συνδυάστε την με object-fit: cover στις εικόνες για να κόβονται αντί να παραμορφώνονται.

Ο κώδικας περιλαμβάνει και την παλαιότερη τεχνική padding-top ως εναλλακτική λύση: ένα ποσοστιαίο padding υπολογίζεται από το πλάτος, οπότε το padding-top: 56.25% (9 ÷ 16) δεσμεύει περιοχή 16:9 και το περιεχόμενο τοποθετείται απόλυτα μέσα σε αυτήν. Τη χρειάζεστε μόνο για πολύ παλιά προγράμματα περιήγησης.

Η δέσμευση χώρου με αναλογία αποτρέπει επίσης τις μετατοπίσεις της διάταξης όσο φορτώνονται εικόνες και βίντεο, κάτι που βελτιώνει τον δείκτη Cumulative Layout Shift (CLS).