# 133: Κατανοώντας αποκριτικές εικόνες - CSS-Κόλπα

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

1. και φίλοι
2. 

   Ας πούμε ότι βρισκόμαστε σε οθόνη 1x. Επειδή έχουμε πει στο πρόγραμμα περιήγησης ότι θα χρησιμοποιούμε αυτές τις εικόνες όσο το δυνατόν περισσότερο (100% της θύρας προβολής), τα «σημεία διακοπής» για το πότε θα ανοίξει το πρόγραμμα περιήγησης οι εικόνες θα συμβούν στα 1280px, 640px, και 320 εικονοστοιχεία, τα ίδια ακριβώς μεγέθη με τα οποία είπαμε ότι είναι οι εικόνες.

   Εάν βρισκόμαστε σε οθόνη 2x, αυτά τα "σημεία διακοπής" θα μειωθούν στο μισό (ανεξάρτητα από το τι πραγματικά κάνουμε για τη μεγέθυνση αυτών των εικόνων) και θα είναι στα 640px, 320px και 160px.

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

   Εδώ λέμε (με το sizesχαρακτηριστικό), εάν η θύρα προβολής είναι 500px ή μικρότερη, σκοπεύουμε να εμφανίσουμε την εικόνα σε πλάτος 250px. Εάν η θύρα προβολής είναι ευρύτερη από αυτήν, εμφανίστε την εικόνα σε πλάτος 500px.

   Αυτό θα ταιριάζει με το CSS ως εξής:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   Σε μια οθόνη 1x, θα λαμβάνετε πάντα την εικόνα 320w (μικρή) όταν η θύρα προβολής έχει πλάτος 500px ή μικρότερη και θα λαμβάνετε πάντα την εικόνα 640w (μεσαία) όταν η θύρα προβολής είναι μεγαλύτερη. Δεν θα έχετε ποτέ τη μεγάλη εικόνα, γιατί μπορεί να σας πει ότι δεν θα χρειαστείτε ποτέ τόσο πολλά pixel.

   Στην οθόνη Ona 2x, θα έχετε πάντα την εικόνα 640w (μεσαία) όταν η θύρα προβολής έχει πλάτος 500px ή μικρότερη (επειδή πιστεύει ότι χρειάζεται 500px pixel και το μικρό δεν είναι αρκετό στα 320px) και θα έχετε πάντα το 1280w (μεγάλη) εικόνα όταν η θύρα προβολής είναι μεγαλύτερη. Δεν θα πάρετε ποτέ τη μικρή εικόνα, γιατί δεν είναι ποτέ αρκετά εικονοστοιχεία για να καλύψετε αυτό που του είπατε ότι σκοπεύετε να αποδώσετε την εικόνα.

   Πραγματικό μέγεθος

   Θυμηθείτε ότι το πραγματικό μέγεθος της εικόνας εξαρτάται από εσάς. Νομίζω ότι στις περισσότερες περιπτώσεις το κάνετε μέσω του CSS. Και το CSS κερδίζει πάντα. Τι δηλώνουν θα είναι εκεί που το τετηγμένο πλάτος της εικόνας δεν έχει σημασία τι θα συμβεί με το srcsetκαι sizesπράγματα. Αυτό ακριβώς υπολογίζει ποια εικόνα θα εμφανίζεται.

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

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Αυτό δεν είναι καθόλου ασυνήθιστο. Λοιπόν, τι μέγεθος χρησιμοποιείτε στο sizesχαρακτηριστικό; Αυτό θα ήταν 13,33% (πολλαπλασιάστε τα όλα μαζί) επειδή αυτός ο αριθμός πρέπει να σχετίζεται με τη θύρα προβολής και όχι με το κοντέινερ. Και αυτό δεν λαμβάνει υπόψη τα περιθώρια και την επένδυση και τα πράγματα σε αυτά τα δοχεία, οπότε είναι κάπως εικασία. Υποθέτω ότι οι μετρήσεις σε πέταλα, χειροβομβίδες και τα χαρακτηριστικά μεγέθους.

   Τότε ας πούμε ότι έρχεται ένα ερώτημα πολυμέσων και το σώμα γίνεται πραγματικά 75% πλάτος πάνω από όλα αυτά. Πρέπει να το ξέρετε έτσι ώστε να μπορείτε να προσαρμόσετε αυτό που πιστεύετε ότι θα είναι το τετηγμένο μέγεθος των εικόνων. Το χαρακτηριστικό σας μεγέθους μπορεί να γίνει:

   sizes="(min-width: 500px) 8%, 13.33%"

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

   Πρακτικά μεγέθη;

   Υποψιάζομαι ότι η πιο πραγματική χρήση του κόσμου θα χρησιμοποιεί κάτι σαν

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

   Και θυμηθείτε ότι αυτές είναι εικόνες περιεχομένου. Η HTML τείνει να διαρκεί περισσότερο από ό, τι CSS ή JS, ειδικά όταν είναι περιεχόμενο.

   Άλλα πράγματα που πρέπει να γνωρίζετε

   Μπορείτε επίσης να καθορίσετε εάν μια εικόνα είναι 2x ή 1x με srcset. Έτσι, μια πραγματικά απλή περίπτωση χρήσης μπορεί να είναι:

   Αυτό από μόνο του είναι πολύ χρήσιμο. Μην το αναμιγνύετε με καθορισμό πλάτους. Όπως λέει ο Eric Portis:

   Και πάλι, επιτρέψτε μου να τονίσω ότι, ενώ μπορείτε να επισυνάψετε περιγραφές ανάλυσης 1x / 2x σε πηγές srcsetαντί για wπεριγραφές, 1x / 2x & w δεν αναμιγνύονται. Μην χρησιμοποιείτε και τα δύο στο ίδιο srcset. Πραγματικά.

   Και θυμάστε όταν είπα ότι η αρχική φωτογραφία είναι εύκολο; Το νέο μπορεί να είναι τόσο εύκολο, αλλά τα στοιχεία στο εσωτερικό υποστηρίζουν srcsetκαι sizes. Αυτό σημαίνει ότι μπορείτε να πάρετε πολύ συγκεκριμένους. Προσθέτει ένα άλλο επίπεδο σε αυτό:

   1. Εσείς αποφασίζετε ποιο

      Συνδέσεις

      • Το άρθρο του Martin Wolf που το ενέπνευσε
      • Το Picturefill είναι το polyfill που θέλετε να χρησιμοποιήσετε.
      • Το άρθρο του Smashing Magazine στο Picturefill 2.0 του Tim Wright
      • Eric Portis για το γιατί υπάρχει Srcset και μεγέθη και τι λύνει καλύτερα από τα ερωτήματα πολυμέσων
      • Ο Eric Portis με περισσότερα για το νέο

      Δείτε το στυλό στυλό & sr Pen του Chris Coyier (@chriscoyier) στο CodePen.