Ως προγραμματιστής ιστού, βρίσκεστε συχνά στο δίλημμα της εργασίας με στοιχεία HTML που - σε αντίθεση με το στοιχείο img, για παράδειγμα - δεν έχουν ούτε σταθερό μέγεθος ούτε σταθερό λόγο διαστάσεων. Συχνά θέλετε να διασφαλίσετε ότι αυτά τα αντικείμενα συμπεριφέρονται με απόκριση, αλλά η αναλογία μεταξύ πλάτους και ύψους διατηρείται. Από προεπιλογή, το CSS δεν προσφέρει μια διαισθητική λύση εδώ. Αλλά με τη βοήθεια της ιδιότητας κάθετης επένδυσης μπορείτε να πετύχετε τον στόχο σας.
Ας πάρουμε το καθημερινό παράδειγμα των τετράγωνων εικόνων προϊόντων. Ενώ τα ίδια τα γραφικά δεν είναι απαραίτητα τετράγωνα, θα θέλαμε να τα εμφανίσουμε με αναλογία διαστάσεων 1:1 χωρίς επιπλέον προσπάθεια ή παραμόρφωση, και το πλάτος τους (και επομένως το ύψος) θα πρέπει να αλλάζει ανάλογα. Ο ακόλουθος κώδικας διευκολύνει την επίτευξη αυτού του στόχου χρησιμοποιώντας CSS χωρίς καμία πρόσθετη σήμανση.:
1bc3a80de3db90cdf0535541236d95f2
με το αποτέλεσμα:
Γιατί όμως λειτουργεί αυτό και πώς μπορούν να δημιουργηθούν άλλοι λόγοι διαστάσεων; Το κλειδί σε αυτό βρίσκεται στην ιδιότητα padding, η οποία - καθορίζεται σε ποσοστιαίες τιμές - βασίζεται πάντα στην ίδια βασική τιμή με την ιδιότητα Width (δηλαδή το πλάτος του γονικού στοιχείου). Αυτό είναι προφανές για padding-αριστερά και padding-right, εκπληκτικό για padding-top και padding-bottom, αλλά πολύ χρήσιμο σε αυτή την περίπτωση.
Αν θέλετε αναλογία διαστάσεων 16: 9, για παράδειγμα, επιλέγετε τις τιμές πλάτους: 100%, βάθος βάσης: 56,25%. Ένας λόγος διαστάσεων που λαμβάνει υπόψη τη χρυσή αναλογία είναι το πλάτος: 100%, το κάτω μέρος: 61,81%. πραγματοποιήσιμος.
Με τη βοήθεια του calc μπορείτε να καθορίσετε άμεσα την αναλογία διαστάσεων, για παράδειγμα για το 16: 9 με το κάτω μέρος: calc (1 / (16/9) * 100%). Εάν το στοιχείο αποτελείται από περαιτέρω, ένθετα στοιχεία, το θυγατρικό στοιχείο είναι τοποθετημένο απολύτως για να αντισταθμίσει την επένδυση του γονικού στοιχείου:
1bc3a80de3db90cdf0535541236d95f2
Αυτό οδηγεί στο ακόλουθο αποτέλεσμα: