Εκπαιδευτικό CSS Responsive Image: Πώς να ανταποκρίνετε τις εικόνες με CSS

Η πλειονότητα των σημερινών ιστότοπων ανταποκρίνεται. Και αν πρέπει να κεντράρετε και να ευθυγραμμίσετε την εικόνα σε αυτόν τον ιστότοπο, πρέπει να μάθετε πώς να κάνετε τις εικόνες ρευστές ή ανταποκρινόμενες με CSS.

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

Θα μάθετε επίσης μερικά από τα γενικά προβλήματα που μπορεί να προκύψουν όταν προσπαθείτε να κάνετε τις εικόνες ανταποκρινόμενες - και θα προσπαθήσω να εξηγήσω πώς να τις λύσετε.

Πώς να κάνετε τις εικόνες ανταποκρινόμενες με CSS

Πρέπει να χρησιμοποιήσω σχετικές ή απόλυτες μονάδες;

Η δημιουργία ρευστού εικόνας ή η απόκριση, είναι πραγματικά πολύ απλή. Όταν ανεβάζετε μια εικόνα στον ιστότοπό σας, έχει προεπιλεγμένο πλάτος και ύψος. Μπορείτε να τα αλλάξετε και τα δύο με CSS.

Για να αποκρίνετε μια εικόνα, πρέπει να δώσετε μια νέα τιμή στην ιδιότητα πλάτους της. Στη συνέχεια, το ύψος της εικόνας θα προσαρμοστεί αυτόματα.

Το σημαντικό πράγμα που πρέπει να γνωρίζετε είναι ότι πρέπει πάντα να χρησιμοποιείτε σχετικές μονάδες για την ιδιότητα πλάτους, όπως ποσοστό, και όχι απόλυτες όπως pixel.

img { width: 500px; }

Για παράδειγμα, εάν ορίσετε ένα σταθερό πλάτος 500px, η εικόνα σας δεν θα ανταποκρίνεται - επειδή η μονάδα είναι απόλυτη.

img { width: 50%; }

Γι 'αυτό πρέπει να αντιστοιχίσετε μια σχετική μονάδα όπως το 50%. Αυτή η προσέγγιση θα κάνει τις εικόνες σας ρευστές και θα μπορούν να αλλάξουν το μέγεθος ανεξάρτητα από το μέγεθος της οθόνης.

Πρέπει να χρησιμοποιήσω ερωτήματα πολυμέσων;

Μία από τις ερωτήσεις που με ρωτούν περισσότερο είναι αν πρέπει να χρησιμοποιήσετε ερωτήματα πολυμέσων ή όχι.

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

Η απάντηση σε αυτήν την ερώτηση είναι: «εξαρτάται». Εάν θέλετε η εικόνα σας να έχει διαφορετικά μεγέθη από τη μία συσκευή στην άλλη, τότε θα πρέπει να χρησιμοποιήσετε ερωτήματα πολυμέσων. Διαφορετικά, δεν θα το κάνετε.

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

@media only screen and (max-width: 480px) { img { width: 100%; } }

Έτσι, βάσει του κανόνα ερωτήματος πολυμέσων, οποιαδήποτε συσκευή μικρότερη από 480 εικονοστοιχεία θα έχει το πλήρες μέγεθος του πλάτους της οθόνης.

Μπορείτε επίσης να παρακολουθήσετε την έκδοση βίντεο αυτής της ανάρτησης παρακάτω:

Γιατί η ιδιότητα μέγιστου πλάτους δεν είναι εξαιρετική;

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

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

Η ιδιότητα μέγιστου πλάτους ορίζει ένα μέγιστο πλάτος για ένα στοιχείο, το οποίο δεν επιτρέπει στο πλάτος αυτού του στοιχείου να είναι μεγαλύτερο από την τιμή του μέγιστου πλάτους (αλλά μπορεί να είναι μικρότερο).

Για παράδειγμα, εάν η εικόνα έχει προεπιλεγμένο πλάτος 500 εικονοστοιχεία και εάν το μέγεθος της οθόνης σας έχει μόνο 360 εικονοστοιχεία, τότε δεν θα μπορείτε να δείτε την πλήρη εικόνα, επειδή δεν υπάρχει αρκετός χώρος:

img { max-width: 100%; width: 500px; // assume this is the default size }

Επομένως, μπορείτε να ορίσετε μια ιδιότητα μέγιστου πλάτους για την εικόνα και να την ορίσετε σε 100%, η οποία συρρικνώνει την εικόνα των 500 εικονοστοιχείων στο χώρο των 360 εικονοστοιχείων. Έτσι θα μπορείτε να δείτε την πλήρη εικόνα σε μια οθόνη μικρότερου μεγέθους.

Το καλό είναι ότι, δεδομένου ότι χρησιμοποιείτε μια σχετική μονάδα, η εικόνα θα είναι ρευστή σε οποιαδήποτε συσκευή μικρότερη από 500 εικονοστοιχεία.

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

Για να το διορθώσετε, πρέπει να χρησιμοποιήσετε ξανά την ιδιότητα πλάτους, γεγονός που καθιστά άχρηστη την ιδιότητα πλάτους

Τι γίνεται με τα ύψη;

Ένα άλλο κοινό πρόβλημα που μπορεί να αντιμετωπίσετε αφορά την ιδιότητα ύψους. Κανονικά, το ύψος μιας εικόνας αλλάζει αυτόματα το μέγεθος, οπότε δεν χρειάζεται να αντιστοιχίσετε μια ιδιότητα ύψους στις εικόνες σας (επειδή σπάει κάπως την εικόνα).

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

img { width: 100%; height: 300px; }

Ευτυχώς, υπάρχει μια άλλη ιδιότητα που προσφέρει η CSS για την επίλυση αυτού του προβλήματος…

Λύση: Η ιδιότητα Fit-Fit

Για να έχετε περισσότερο έλεγχο στις εικόνες σας, το CSS παρέχει μια άλλη ιδιότητα που ονομάζεται αντικείμενο-προσαρμογή. Ας χρησιμοποιήσουμε την ιδιότητα προσαρμογής αντικειμένου και αφήστε μια τιμή, η οποία θα κάνει την εικόνα σας να φαίνεται καλύτερη:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

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

Ελπίζω ότι αυτή η ανάρτηση σας βοήθησε να κατανοήσετε και να λύσετε τα προβλήματά σας με εικόνες που ανταποκρίνονται. Αν θέλετε να μάθετε περισσότερα για την ανάπτυξη ιστού, μη διστάσετε να δείτε το κανάλι μου στο Youtube.

Ευχαριστούμε που το διαβάσατε!