Τεχνικές CSS που εξοικονομούν χρόνο για τη δημιουργία αποκριτικών εικόνων

Ως προγραμματιστής ιστού, υπάρχει μεγάλη πιθανότητα να αντιμετωπίσετε τους δύο εχθρούς αυτού του άρθρου: εικόνες και προθεσμίες . Μερικές φορές, για ορισμένους λόγους, οι εικόνες σας δεν ταιριάζουν στη διάταξη και δεν θέλετε να τυλίξετε το κεφάλι σας για ώρες.

Αυτή η κατάσταση μου έχει συμβεί πολλές φορές και έχω μάθει από τα λάθη μου. Όχι άλλα μαύρα μαγεία - εδώ είναι οι πέντε αγαπημένες μου τεχνικές για το χειρισμό του μεγέθους της εικόνας.

το "OMG ΧΡΕΙΑΖΩ ΑΥΤΟ ΤΟ ΣΥΝΤΟΜΟΤΕΡΟ ΔΡΟΜΟ"

Είναι Παρασκευή 5:00 μ.μ., πρέπει να ολοκληρώσετε αυτήν τη σελίδα, αλλά οι εικόνες δεν θα ταιριάζουν στη διάταξη. Ήρθε η ώρα να χρησιμοποιήσετε το μαγικό σας τέχνασμα!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Ακούγεται γνωστό? Το κάναμε όλοι μία φορά, δεν σας αρέσει να σας εξαπατάμε;

Η χρήση backgroundιδιοτήτων είναι πολύ χρήσιμη, απλώς λειτουργούν. Ωστόσο, να θυμάστε ότι πρέπει να τις χρησιμοποιείτε μόνο για εικόνες χωρίς περιεχόμενο ή ως αντικατάσταση κειμένου και σε ορισμένες συγκεκριμένες περιπτώσεις.

Ο δρόμος από το μέλλον

Τι γίνεται αν σας είπα ότι αυτό το είδος μαγείας υπάρχει και για στοιχεία; Πείτε "γεια" στην ιδιότητα που ταιριάζει σε αντικείμενα - η οποία λειτουργεί και για βίντεο, παρεμπιπτόντως!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Αυτό ήταν παιδιά! Δείτε πώς όταν ανακτούμε τη φιλική τιμή cover, μπορούμε επίσης να χρησιμοποιήσουμε contain.

Εντάξει, ποια είναι η παγίδα;

Δυστυχώς object-fitδεν θα λειτουργήσει σε IE και παλαιότερες εκδόσεις του Safari, αλλά υπάρχει ένα polyfill.

Ο τρόπος «Netflix»

Μπορεί να σκεφτείτε "ωραίο άτομο, ένα ακόμη τρόπο που δεν λειτουργεί σε παλιά προγράμματα περιήγησης όπως το IE;". Μην ανησυχείτε, αυτό λειτουργεί παντού και είναι το αγαπημένο μου! Θα πρέπει να τυλίξετε την εικόνα σας με έναν σχετικό γεμισμένο γονέα.

Θα διατηρήσουμε την αναλογία εικόνας με ποσοστό επί της paddingιδιότητας. Η εικόνα σας θα είναι απόλυτο παιδί πλήρους μεγέθους.

Ο κωδικός μοιάζει με αυτόν:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Γεια σου, φαίνεται περίπλοκο."

Μόλις αποκτήσετε την ιδέα, η τεχνική είναι απλή και χρησιμοποιείται ευρέως. Το Netflix το χρησιμοποιεί!

Ένα μικρό demo:

Ο απλός τρόπος

Ίσως το γνωρίζετε ήδη:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Εάν η διάταξή σας δεν είναι πολύ περίπλοκη, λειτουργεί στις περισσότερες περιπτώσεις.

Ο τρόπος απόδοσης (για προχωρημένους)

Από την απόδοση, εννοώ τους χρόνους φόρτωσης. Μια μεγάλη εικόνα ήρωα μπορεί να την καταστρέψει και να κάνει τη σελίδα σας να αισθάνεται αργή, ειδικά σε κινητά.

Γνωρίζατε ότι στα σύγχρονα προγράμματα περιήγησης μπορείτε να αλλάξετε μια πηγή εικόνας ανάλογα με το πλάτος της σελίδας σας; Γι 'αυτό srcsetείναι φτιαγμένο!

Μπορείτε να τα συνδυάσετε με την ετικέτα HTML 5 , η οποία υποβαθμίζεται χαριτωμένα με ένα .

Για να ανακεφαλαιώσουμε

  1. Χρησιμοποιήστε το background-image εάν η εικόνα σας δεν είναι μέρος του περιεχομένου της σελίδας.
  2. Χρησιμοποιήστε το object-fitεάν δεν σας ενδιαφέρει το IE.
  3. Η τεχνική με επένδυση εμπορευματοκιβωτίων, που χρησιμοποιείται από το Netflix, λειτουργεί παντού.
  4. Στις περισσότερες περιπτώσεις, απλώς προσθέστε height: auto;το CSS σας.
  5. Εάν χρειάζεστε γρήγορους χρόνους φόρτωσης, χρησιμοποιήστε srcsetγια να φορτώσετε μικρότερες εικόνες σε κινητό.