Ενότητα aspect-ratio για το CSS

ορισμός και χρήση

aspect-ratio η ιδιότητα σας επιτρέπει να καθορίσετε το aspect ratio του πλάτους και του ύψους του στοιχείου.

Αν έχει οριστεί η ιδιότητα aspect-ratio και πλάτος η ύψος θα προσαρμοστεί ανάλογα με το ορισμένο aspect ratio.

Για να κατανοήσετε καλύτερα την ιδιότητα aspect-ratio ιδιότητα, παρακολουθήστε την προσομοίωση.

συμβουλή:στο πλαίσιο της προσαρμοστικής διάταξης aspect-ratio Η ιδιότητα αυτή είναι χρήσιμη όταν η διάσταση του στοιχείου αλλάζει συχνά και θέλετε να διατηρήσετε το πλάτος και το ύψος σε ισορροπία.

παράδειγμα

παράδειγμα 1

Προσθέστε aspect ratio στο στοιχείο:

div {
  aspect-ratio: 3 / 2;
}

δοκιμάστε το προσωπικά

παράδειγμα 2

Αν η διάσταση του στοιχείου div πρέπει να αλλάζει:aspect-ratio Η ιδιότητα είναι ιδανική για τον έλεγχο του aspect ratio του στοιχείου div. Για παράδειγμα, σε μια συλλογή εικόνων, θέλετε το στοιχείο div να είναι ευέλικτο για να προσαρμόζεται σε όλα τα συσκευές, αλλά να διατηρεί το aspect ratio των εικόνων:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>alley</div>
  <div>flowers by the street</div>
  <div>mountains</div>
  <div>Cinque Terre</div>
</div>

δοκιμάστε το προσωπικά

γλώσσα CSS

aspect-ratio: number/number|προεπιλεγμένη τιμή|παράδοση;

τιμή ιδιότητας

τεχνικά λεπτομέρειες

υποστήριξη προγραμματιστών

Τα αριθμήματα στη τάβλη περιλαμβάνουν τις εκδόσεις των προγραμματιστών που υποστηρίζουν πλήρως αυτό το χαρακτηριστικό.

σχετικές σελίδες

οδηγίες:CSS Μονάδα Γραφής Δικτύου

παραδείγματα:CSS Object-fit Απόδειξη

παραδείγματα:CSS Object-position Απόδειξη