⌘K

Ιδιότητα aspect-ratio

Η ιδιότητα aspect-ratio ορίζει την ευθυγράμμιση στοιχείων κατά μήκος του εγκάρσιου άξονα για flex blocks και κατά μήκος του οριζόντιου άξονα για grids. Εφαρμόζεται στο γονικό στοιχείο.

Σύνταξη

cssεπιλογέας {
  aspect-ratio: auto ή αναλογία;
}

Τιμές

Τιμή Περιγραφή
auto Το στοιχείο δεν έχει προτιμώμενη αναλογία διαστάσεων και το πρόγραμμα περιήγησης την ορίζει αυτόματα, με βάση το πλάτος και το ύψος του στοιχείου.
αναλογία Η αναλογία γράφεται ως 16/9, εδώ ο πρώτος αριθμός είναι το πλάτος και ο δεύτερος αριθμός είναι το ύψος. Εάν κάποια τιμή δεν καθορίζεται, τότε θεωρείται ίση με 1. Επίσης ορισμένες αναλογίες επιτρέπεται να γράφονται με έναν αριθμό. Για παράδειγμα, το 2/1 μπορεί να γραφτεί ως 0.5, αυτό θα δώσει το ίδιο αποτέλεσμα.
auto && αναλογία Εάν η αναλογία διαστάσεων έρχεται μαζί με τη λέξη-κλειδί auto (παράδειγμα: auto 1/2), τότε θα επιλέγεται η καθορισμένη αναλογία, αλλά για αντικαταστάσιμα στοιχεία (όπως εικόνες και βίντεο) με δική τους αναλογία διαστάσεων θα χρησιμοποιείται μόνο αυτή.

Παράδειγμα

Ας ορίσουμε για το κουμπί αυτόματη αναλογία διαστάσεων: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Παράδειγμα

Και τώρα ας ορίσουμε αναλογία διαστάσεων για το κουμπί ως 1/2: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Δείτε επίσης

  • η ιδιότητα object-fit,
    που κλιμακώνει στοιχεία
BackΙδιότητα resizeNextΙδιότητα object-fit