Διορθώθηκε η αναλογία διαστάσεων για στοιχεία HTML

Ως προγραμματιστής ιστού, συχνά ντρέπεται κανείς να συνεργάζεται με στοιχεία HTML που από μόνα τους - σε αντίθεση με το στοιχείο img, για παράδειγμα - δεν έχουν ούτε σταθερό μέγεθος ούτε σταθερό λόγο διαστάσεων. Συχνά θέλετε να επιτύχετε ότι αυτά τα αντικείμενα συμπεριφέρονται ανταποκριτικά, αλλά διατηρείται η αναλογία μεταξύ πλάτους και ύψους. Το CSS δεν προσφέρει μια διαισθητική λύση εδώ από προεπιλογή. Αλλά με τη βοήθεια της κατακόρυφης επένδυσης, μπορείτε να επιτύχετε τον στόχο σας.


Ας πάρουμε το καθημερινό παράδειγμα εικόνων τετραγωνικών άρθρων, των οποίων τα γραφικά δεν είναι απαραίτητα τετράγωνα, αλλά θα θέλαμε να τις εμφανίσουμε με την αναλογία διαστάσεων 1: 1 χωρίς επιπλέον προσπάθεια και πάνω απ 'όλα χωρίς παραμόρφωση, με την οποία το πλάτος τους (και συνεπώς και το ύψος) αλλάζουν ανταποκριτικά πρέπει. Με τον παρακάτω κώδικα είναι πολύ εύκολο να το κάνετε αυτό χωρίς επιπλέον σήμανση με τη βοήθεια του CSS:

1bc3a80de3db90cdf0535541236d95f2

με το αποτέλεσμα

 

Γιατί όμως λειτουργεί και πώς μπορούν να δημιουργηθούν άλλοι λόγοι διαστάσεων; Το κλειδί για αυτό βρίσκεται στην ιδιότητα padding, η οποία - δίνεται σε ποσοστιαίες τιμές - βασίζεται πάντα στην ίδια βασική τιμή με την ιδιότητα Width (δηλαδή το πλάτος του γονικού στοιχείου). Με την επένδυση-αριστερά και την επένδυση-δεξιά αυτό είναι προφανές, με εκπληκτική επένδυση και επένδυση-κάτω, αλλά πολύ χρήσιμη σε αυτήν την περίπτωση.

Αν θέλετε αναλογία διαστάσεων 16: 9, για παράδειγμα, επιλέγετε τις τιμές πλάτους: 100%, βάθος βάσης: 56,25%. Ένας λόγος διαστάσεων που λαμβάνει υπόψη τη χρυσή αναλογία είναι το πλάτος: 100%, το κάτω μέρος: 61,81%. πραγματοποιήσιμος.

Με τη βοήθεια του calc μπορείτε να καθορίσετε άμεσα την αναλογία διαστάσεων, για παράδειγμα για το 16: 9 με το κάτω μέρος: calc (1 / (16/9) * 100%). Εάν το στοιχείο αποτελείται από περαιτέρω, ένθετα στοιχεία, το θυγατρικό στοιχείο είναι τοποθετημένο απολύτως για να αντισταθμίσει την επένδυση του γονικού στοιχείου:

1bc3a80de3db90cdf0535541236d95f2

Αυτό οδηγεί στο ακόλουθο αποτέλεσμα:

...
Πίσω