Ιδιότητα aspect-ratio

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

Σύνταξη

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

Τιμές

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

Παράδειγμα

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

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

Παράδειγμα

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

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

Δείτε επίσης

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