Ένα άρθρο στο οποίο θα εξοικειωθούμε με τις τάξεις του πλαισίου Bootstrap 3 και 4 για τη διακόσμηση εικόνων.
Τι συνέβη αποκριτική εικόνα?Μια αποκριτική εικόνα είναι μια εικόνα που προσαρμόζεται στο πλάτος του στοιχείου στο οποίο τοποθετείται.
Εκείνοι. πληροί τις ακόλουθες προϋποθέσεις:
- εάν το πλάτος της εικόνας είναι μικρότερο από το πλάτος του στοιχείου στο οποίο βρίσκεται, τότε οι διαστάσεις αυτής της εικόνας δεν αλλάζουν.
- εάν το πλάτος της εικόνας είναι μεγαλύτερο από το πλάτος του στοιχείου στο οποίο βρίσκεται, τότε το πλάτος της εικόνας είναι ίσο με το διαθέσιμο πλάτος του γονικού στοιχείου. Σε αυτήν την περίπτωση, το ύψος αυτής της εικόνας μειώνεται ανάλογα με το πλάτος της.
Η προσαρμογή της εικόνας πραγματοποιείται:
- στο Bootstrap 3 προσθέτοντας την κλάση .img-responsive στην ετικέτα img.
- στο Bootstrap 4 προσθέτοντας την κλάση .img-fluid στην ετικέτα img.
Αυτές οι κλάσεις εφαρμόζονται στην εικόνα Ιδιότητες CSSμέγιστο πλάτος: 100% και ύψος: αυτόματο.
Εάν πρέπει να προσαρμόσετε ταυτόχρονα όλες τις εικόνες που βρίσκονται στη σελίδα ή σε κάποιο μπλοκ, τότε για αυτό πρέπει να χρησιμοποιήσετε έναν από τους ακόλουθους κανόνες CSS:
/* Μέθοδος 1 - Κάντε όλες τις εικόνες να ανταποκρίνονται. Σε αυτήν την περίπτωση, τα δεδομένα εικόνας θα εισαχθούν ως στοιχεία inline-block (inline-block) */ img ( εμφάνιση: inline-block; ύψος: auto; max-width: 100%; ) /* Μέθοδος 2 - Δημιουργία όλων των εικόνων προσαρμοστικός. Σε αυτήν την περίπτωση, τα δεδομένα εικόνας θα εισαχθούν ως στοιχεία μπλοκ (μπλοκ) */ img ( εμφάνιση: μπλοκ; ύψος: αυτόματο; μέγιστο πλάτος: 100%; ) /* 3 Μέθοδος - Δώστε προσαρμοστικότητα σε όλες τις εικόνες που βρίσκονται στο στοιχείο με id=" κύριο". Σε αυτήν την περίπτωση, τα δεδομένα της εικόνας θα εισαχθούν ως στοιχεία μπλοκ (μπλοκ) */ #main img ( οθόνη: μπλοκ; ύψος: αυτόματο; μέγιστο πλάτος: 100%; )
Αυτός ο κανόνας πρέπει να προστεθεί στο αρχείο CSS, το οποίο πρέπει να συμπεριληφθεί μετά το αρχείο bootstrap.css.
Πώς να αναδιαμορφώσετε μια εικόναΣτο Bootstrap 3 και 4, μπορείτε να χρησιμοποιήσετε τις κατάλληλες κλάσεις για να δημιουργήσετε μια εικόνα με στρογγυλεμένες γωνίες (Bootstrap 3 - img-rounded , Bootstrap 4 - rounded), να την περικλείσετε σε ένα πλαίσιο (img-thumbnail) ή να της δώσετε σχήμα κύκλου ( Bootstrap 3 - img-circle , Bootstrap 4 - rounded-circle).
Μπορείτε να αλλάξετε τη θέση μιας εικόνας στο Bootstrap 3 χρησιμοποιώντας τις κλάσεις float helper (.pull-left και .pull-right), την κλάση .center-block και τις κατηγορίες στοίχισης κειμένου (.text-left, .text-center και .κείμενο-δεξιά) .
Το Bootstrap 4 χρησιμοποιεί τις ακόλουθες κλάσεις για τη στοίχιση στοιχείων: κλάσεις float-left , float-right , mx-auto και text-align (.text-left , .text-center και .text-right).
Προσοχή:
Οι κλάσεις .pull-left, .pull-right και .center-block μπορούν να χρησιμοποιηθούν για τη στοίχιση εικόνων που συμπεριφέρονται σαν στοιχεία μπλοκ ή ενσωματωμένου μπλοκ. Μετά την εφαρμογή τους, οι εικόνες γίνονται μπλοκαρισμένες.
Οι κλάσεις .text-left, .text-center και .text-right μπορούν να χρησιμοποιηθούν μόνο για την επανατοποθέτηση εικόνων που συμπεριφέρονται σαν στοιχεία inline-block.
Για παράδειγμα, για να τοποθετήσετε μια εικόνα στα αριστερά, πρέπει να προσθέσετε την κλάση .pull-left σε αυτήν:
Για παράδειγμα, για να τοποθετήσετε μια εικόνα στη δεξιά άκρη, πρέπει να προσθέσετε την κλάση .pull-right σε αυτήν:
Για παράδειγμα, για να κεντράρετε μια εικόνα, πρέπει να προσθέσετε την κλάση .center-block σε αυτήν ή να την τοποθετήσετε σε ένα κοντέινερ με την κλάση .text-center:
Εξετάστε διάφορες επιλογές για το σχεδιασμό εικόνων στον ιστότοπο.
Επιλογή 1: Διακοσμήστε μια εικόνα με ένα πλαίσιο που είναι παράθυρο του προγράμματος περιήγησης Mac OS (με τρία στοιχεία ελέγχου στα αριστερά).
/* CSS */ .srcshot ( θέση: σχετική; φόντο: #fff; περίγραμμα: 2px συμπαγές #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( οθόνη: flex; align-item: κέντρο; ύψος: 20 εικονοστοιχεία; φόντο: #9e9e9e; κάτω περιγράμματος: 2 εικονοστοιχεία συμπαγές #9e9e9e; ) .srcshot-header::after ( περιεχόμενο: "στιγμιότυπο οθόνης"; γραμματοσειρά-οικογένεια: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; μέγεθος γραμματοσειράς: 12 px; χρώμα: #fff; margin-left: auto; margin-right: 5px; ) .srcshot-header-btn (πλάτος: 10px; ύψος: 10px; φόντο: #fff; margin-left: 5px; border-radius: 5px; ) .srcshot-wrapper ( margin: 5px; ) @media (min-width: 768px) ( .srcshot-wrapper ( margin: 15px; ) ) . srcshot-wrapper-item (οθόνη: μπλοκ; μέγιστο πλάτος: 100%; ύψος: αυτόματο; περιθώριο: 0 αυτόματο; ) 
Επιλογή 2: Ένα πλαίσιο εικόνας που μοιάζει με παράθυρο του προγράμματος περιήγησης των Windows (με τρία στοιχεία ελέγχου στα δεξιά).
/* CSS */ .srcshot ( θέση: σχετική; φόντο: #fff; περίγραμμα: 2px συμπαγές #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( οθόνη: flex; align-item: κέντρο; ύψος: 20 εικονοστοιχεία; φόντο: #9e9e9e; περιθώριο-κάτω: 2 εικονοστοιχεία συμπαγές #9e9e9e; ) .srcshot-header::before ( περιεχόμενο: "στιγμιότυπο οθόνης"; γραμματοσειρά-οικογένεια: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; μέγεθος γραμματοσειράς: 12px; χρώμα: #fff; margin-αριστερό: 5px; margin-right: auto; ) .srcshot-header-btn (πλάτος: 18px; ύψος: 10px; .srcshot-wrapper ( περιθώριο: 5 εικονοστοιχεία; ) @media (ελάχ. πλάτος: 768 εικονοστοιχεία) ( .srcshot-wrapper ( περιθώριο: 15 εικονοστοιχεία; ) ) .srcshot-wrapper-item ( εμφάνιση: μπλοκ, μέγιστο πλάτος: 100%, ύψος : αυτόματο, περιθώριο: 0 αυτόματο; )
Επιλογή 3. Εικόνα με πλαίσιο και επεξηγηματική επιγραφή "screenshot".
/* CSS */ .srcshot ( θέση: σχετική; στοίχιση κειμένου: κέντρο; περιθώριο-πάνω: 20 εικονοστοιχεία; περιθώριο-κάτω: 20 εικονοστοιχεία; ) .srcshot::before ( περιεχόμενο: "στιγμιότυπο οθόνης"; θέση: απόλυτη; επάνω: 0 ; αριστερά: 50%; μετατροπή: translateX(-50%), συμπλήρωση: 6 εικονοστοιχεία 6 εικονοστοιχεία 4 εικονοστοιχεία; χρώμα: #616161; φόντο: #fff; μέγεθος γραμματοσειράς: 12 px; ) .srcshot-dark::before ( χρώμα: #fff ; φόντο: #616161; ) .srcshot-item ( οθόνη: inline-block; περίγραμμα: 5px στερεά #fff; box-shadow: 0 0 10px #9e9e9e; border-bottom-left-radius: 4px; border-bottom-right -ακτίνα: 4 εικονοστοιχεία; μέγιστο πλάτος: 100%, ύψος: αυτόματο; ) .srcshot-item-dark ( περίγραμμα: 5 εικονοστοιχεία συμπαγές #616161; ) 
Επιλογή 4. Εικόνα με λευκό περίγραμμα και σκιά.
/* CSS */ .img ( display: block; margin-top: 20px; margin-bottom: 20px; text-align: center; ) .img-item ( display: inline-block; περίγραμμα: 5px solid #fff; box -σκιά: 0 0 10 εικονοστοιχεία #9e9e9e; μέγιστο πλάτος: 100%; ύψος: αυτόματο; ) 
Σε αυτό το σύντομο σεμινάριο, θα εξετάσουμε τους απλούστερους τρόπους δημιουργίας εικόνων με απόκριση χρησιμοποιώντας CSS. Υπάρχουν πολλές διαφορετικές λύσεις για να κάνετε τις εικόνες να ανταποκρίνονται και όλες διαφέρουν ως προς την πολυπλοκότητα και τον βαθμό υποστήριξης του προγράμματος περιήγησης. Ένα παράδειγμα ενός δύσκολου τρόπου για την υλοποίηση αποκριτικών εικόνων είναι η χρήση του χαρακτηριστικού srcset, το οποίο απαιτεί πολλές εικόνες, περισσότερη σήμανση και εξάρτηση από την υποστήριξη του προγράμματος περιήγησης.
Οι σύγχρονες προδιαγραφές μας επιτρέπουν να κάνουμε τις εικόνες που χρησιμοποιούνται στις σελίδες του ιστότοπου ευέλικτες και να εμφανίζονται σωστά στις οθόνες διαφόρων συσκευών χρηστών, για αυτό αρκεί να χρησιμοποιήσουμε μόνο μερικές ιδιότητες από το κλιπ CSS.
Ας ξεκινήσουμε εξετάζοντας ένα βασικό παράδειγμα όπου πρέπει να κάνουμε μεμονωμένες εικόνες που χρησιμοποιούνται σε αναρτήσεις ή άλλα μεμονωμένα μπλοκ, πλήρως αποκριτικά. Για παράδειγμα, έχουμε ένα δοχείο στο οποίο έχουμε δώσει πλάτος βάσης: 96%; και ορίστε το μέγιστο πλάτος σε μέγιστο πλάτος: 960 px. , σε αυτό το μπλοκ πρέπει να εμφανίσουμε μια προσαρμοστική εικόνα. Για αυτό το στοιχείο μέσα στο κοντέινερ ορίζουμε το πλάτος στο 100%, ώστε το πλάτος του να είναι πάντα ίσο με το πλάτος του κοντέινερ, ανεξάρτητα από το μέγεθος της θύρας προβολής. Το ύψος, αντίστοιχα, μεταφράζεται σε αυτόματη λειτουργία, ως αποτέλεσμα, η εικόνα θα αλλάξει αναλογικά.
CSS: div.container ( πλάτος: 96%; μέγ. πλάτος: 960 εικονοστοιχεία; περιθώριο: 0 αυτόματα; /* στο κέντρο του κύριου κοντέινερ */ ) img ( πλάτος: 100%; /* πλάτος εικόνας */ ύψος: αυτόματο; /* εικόνες ύψους */ ) σημειώστε ότι το στοιχείο θα αποκρίνεται ακόμη και αν τα χαρακτηριστικά HTML πλάτους και ύψους έχουν οριστεί σε σταθερές τιμές απευθείας στη σήμανση.
Γεια σε όλους! Καταλάβαμε τι είναι η διάταξη με απόκριση, το πλέγμα και πώς να κάνουμε τις γραμματοσειρές να ανταποκρίνονται. Τώρα ας δούμε πώς να προσαρμόσουμε τις εικόνες.
Αυτό είναι πραγματικά ένα πολύ απλό θέμα και δεν θα μας πάρει πολύ.
Για να κάνετε τις εικόνες σας ευέλικτες, απλώς προσθέστε την ιδιότητα max-width=100% σε αυτές.
img(
μέγιστο πλάτος: 100%
}
Ολα! Τώρα η εικόνα μας δεν θα υπερβαίνει το γονικό κοντέινερ και θα προσαρμόζεται ανάλογα με την ανάλυση της οθόνης.
Εκτός από εικόνες, μπορείτε να χρησιμοποιήσετε αυτήν την τεχνική για βίντεο και άλλα αρχεία πολυμέσων.
Img, embed, object, video (
μέγιστο πλάτος: 100%
}
Όλα θα ήταν εντάξει, αλλά αυτό λειτουργεί μόνο στον IE7+. Εάν πρέπει να υποστηρίξετε τον IE6, τότε αυτή η ιδιότητα λειτουργεί εκεί σε αυτήν τη σημείωση:
img(
πλάτος: 100%
}
Εκείνοι. γράψτε πλάτος αντί για μέγιστο πλάτος .
Ένα άλλο πρόβλημα που μπορεί να αντιμετωπίσετε είναι η κακή κλιμάκωση της εικόνας στα Windows. Ναι, είναι στο σύστημα, όχι στο πρόγραμμα περιήγησης. Αν κοιτάξετε προσεκτικά, μπορείτε να δείτε μερικά τεχνουργήματα.
Η επίλυση αυτού του προβλήματος για τον IE είναι απλή.
Λογότυπο(
φόντο: κανένα;
φίλτρο: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}
Εκείνοι. η ιδιότητα φίλτρου μας βοηθά να επιλύσουμε αυτό το πρόβλημα.
Το πρόβλημα των προσαρμοστικών εικόνων είναι αρκετά σχετικό, επομένως θα ξεκινήσω με λίγο συλλογισμό και μεθόδους υλοποίησης και στη συνέχεια θα επισημάνω την επιλογή που, κατά τη γνώμη μου, ταιριάζει καλύτερα.
Έτσι, πριν από περίπου ένα χρόνο, σκέφτηκα ότι για να ανταποκριθεί μια εικόνα (δηλαδή, να τεντωθεί ή να συρρικνωθεί ώστε να ταιριάζει στο πλάτος του δοχείου), αρκεί να χρησιμοποιήσουμε τον ακόλουθο κώδικα:
Wrapper img (πλάτος: 100%; )
Πράγματι, σε ορισμένες περιπτώσεις αυτό μπορεί να περιοριστεί. Αυτό το τέχνασμα λειτουργεί εξαιρετικά όταν το παράθυρο του προγράμματος περιήγησης γίνεται μικρότερο. Τι γίνεται όμως αν το πλάτος του δοχείου που περιέχει την εικόνα γίνει μεγαλύτερο από την ανάλυση της εικόνας; Σωστά. Η εικόνα είναι τεντωμένη σε όλο το πλάτος του δοχείου, αλλά η ποιότητα αφήνει πολλά να είναι επιθυμητή. Τι γίνεται όμως αν χρειάζεστε υποστήριξη για ανάλυση 2048 x1536 px;
Εάν δεν χρησιμοποιείτε svg και αυτό είναι bitmap, τότε το πρώτο πράγμα που σας έρχεται στο μυαλό είναι να τραβήξετε μια εικόνα που θα ταιριάζει στη μέγιστη ανάλυση σελίδα προορισμού, και ήδη με μια αλλαγή στο μέγεθος του παραθύρου του προγράμματος περιήγησης, θα συμπιεστεί με κανονική ποιότητα.
Και μετά υπάρχει το θέμα της απόδοσης. Είναι ανόητο για ένα smartphone να φορτώνει τόσο μεγάλες εικόνες που φαίνονται καλές σε ανάλυση αμφιβληστροειδούς. Εξάλλου, η ταχύτητα των δικτύων κινητής τηλεφωνίας δεν είναι τόσο υψηλή όσο αυτή ενός υπολογιστή και ορισμένοι χρήστες μπορεί να μην περιμένουν να φορτώσει η σελίδα προορισμού στο smartphone τους. Το αποτέλεσμα είναι ένας χαμένος πελάτης.
Μπορείτε να δοκιμάσετε να ορίσετε πολλά div με εικόνες και, στη συνέχεια, χρησιμοποιώντας ερωτήματα πολυμέσων, να αποκρύψετε τα περιττά και να εμφανίσετε μόνο την εικόνα που ταιριάζει στην τρέχουσα ανάλυση.
Φαίνεται ότι το πρόβλημα έχει λυθεί. Γεγονός όμως είναι ότι τα προγράμματα περιήγησης, για να επιταχύνουν την εμφάνιση της σελίδας, προφορτώνουν εικόνες που είναι γραμμένες σε html πριν ξεκινήσει η επεξεργασία του css. Ίσως δεν το έθεσα πολύ σωστά (σωστά), αλλά αν κάνετε αυτό το κόλπο, τότε όλες οι εικόνες θα φορτωθούν, ανεξάρτητα από το τι γράφεται στο css. Που σημαίνει ότι έχουμε κάνει τα πράγματα χειρότερα. κινητές συσκευές. Τώρα θα πρέπει να ανεβάσουν όχι μία, αλλά πολλές εικόνες.
Μπορείτε να το επαληθεύσετε ανοίγοντας τα εργαλεία προγραμματιστή και κοιτάζοντας την καρτέλα "Δίκτυο".
Γενικά, εξακολουθούν να υπάρχουν πολλά προβλήματα που μπορεί να προκύψουν κατά τη διάταξη εικόνων με απόκριση. Και υπάρχουν επίσης αρκετές λύσεις. Όλα εξαρτώνται από τη συγκεκριμένη κατάσταση.
Στο html 5, εμφανίστηκε η ετικέτα εικόνας, η οποία λύνει τα περισσότερα προβλήματα και δημιουργήθηκε ειδικά για τη δημιουργία προσαρμοστικού (ανταποκρινόμενου) σχεδίου. Η κατασκευή του μοιάζει με τις ετικέτες βίντεο και ήχου. Η ουσία της δουλειάς έγκειται στο γεγονός ότι πολλές εικόνες τοποθετούνται μέσα στην ετικέτα εικόνας για συγκεκριμένες αναλύσεις οθόνης. Μοιάζει κάπως έτσι:
Η ιδιαιτερότητα είναι ότι αντί για src χρησιμοποιείται srcset και εφαρμόζεται κάτι παρόμοιο με τα media queries. Μια μικρή εικόνα φορτώνεται σε ανάλυση μικρότερη από 319 px. Μια μέση εικόνα σε ανάλυση 320px έως 480px, κ.λπ.
Γενικά, όταν χρησιμοποιείτε τις νέες ετικέτες, συνιστώ να ελέγξετε αυτόν τον ιστότοπο και να ελέγξετε την τρέχουσα κατάσταση των πραγμάτων.
Όπως μπορείτε να δείτε η κατάσταση αυτή τη στιγμήαφήνει πολλά να είναι επιθυμητά. Καμία υποστήριξη σε συσκευές IOS, Macbook(α) και IE (Αν και οι χρήστες IE δεν τους πειράζει, πρέπει να υποφέρουν). Νομίζω ότι όλοι μας δεν είμαστε έτοιμοι να χάσουμε τέτοιο αριθμό χρηστών. Όχι, λάθος το διατύπωσα. Μην το χάσετε, γιατί η κύρια εικόνα μας θα φορτώσει και θα εμφανιστεί σωστά. Αλλά ούτως ή άλλως, θα ήθελα να μην χάσω πελάτες με την τεχνολογία της Apple λόγω μεγάλου φόρτου σελίδων, καθώς αυτό είναι πιθανότατα ένα διαλυτό κοινό
Για να επωφεληθείτε από αυτήν την ετικέτα τώρα, πρέπει να χρησιμοποιήσετε ένα μικρό σενάριο (ανάμεσα στις ετικέτες κεφαλής) picturefill.js .
Τώρα όλες οι συσκευές θα πρέπει να υποστηρίζουν αυτήν τη δομή διάταξης για προσαρμοστικές εικόνες. Είναι αλήθεια ότι δεν το δοκίμασα σε Mac (δεν το έχω πάρει ακόμα).
Σε αντίθεση με τη μέθοδο που περιγράφεται παραπάνω, τώρα φορτώνεται μόνο μία εικόνα και όχι τρεις, όπως ήταν πριν. 
Κάθε σχεδιαστής ιστοσελίδων γνωρίζει ότι η δημιουργία μιας ανταποκρινόμενης διάταξης είναι ίσως ένα από τα πιο απαιτητικές εργασίεςπου μπορεί να συναντήσει στη δουλειά του. Το πρόβλημα δεν είναι μόνο ότι είναι απαραίτητο να ληφθούν υπόψη οι ιδιαιτερότητες των μεγεθών οθόνης διάφορες συσκευέςκαι επιλέξτε τη θέση των μπλοκ στον ιστότοπο με τέτοιο τρόπο ώστε το έργο ιστού να φαίνεται όμορφο τόσο σε οθόνη υπολογιστή όσο και σε κινητό τηλέφωνο, αλλά στο γεγονός ότι πολλές σύγχρονες συσκευές έχουν τις λεγόμενες οθόνες "retina" με υψηλή πυκνότητα εικονοστοιχείων που επιβάλλουν ειδικές απαιτήσεις στη διάταξη ιστού.
Γεγονός είναι ότι οι οθόνες "αμφιβληστροειδούς" δίνουν εικόνες αυξημένης ευκρίνειας λόγω της διπλής συμπίεσης των κουκκίδων pixel που απαρτίζουν τις εικόνες. Αλλά αυτή η βελτίωση έχει επίσης "μειονεκτήματα", και το πιο σημαντικό από αυτά είναι ότι τώρα είναι απαραίτητο να επιλέγουμε επιπλέον εικόνες υψηλής ευκρίνειας ειδικά για οθόνες "retina". Υπάρχει διάφορες λύσειςπροκειμένου να επιτευχθούν εικόνες υψηλής ευκρίνειας τόσο σε συμβατικές όσο και σε συσκευές αμφιβληστροειδούς. Ας δούμε μερικά παραδείγματα.
Η παραδοσιακή μέθοδος που χρησιμοποιεί μόνο ιδιότητες CSSΣυχνά στη σχεδίαση ιστοσελίδων, χρησιμοποιείται η ίδια εικόνα συγκεκριμένου μεγέθους, για την οποία το μέγιστο μέγεθος εμφάνισης στην οθόνη ορίζεται σε δύο ή περισσότερες φορές μικρότερο από το αρχικό της μέγεθος.
Ένα απλό παράδειγμα: Ας υποθέσουμε ότι θέλετε το λογότυπό σας 250 x 250 px να εμφανίζεται σωστά σε μια οθόνη με διπλάσια πυκνότητα pixel. Σε αυτή την περίπτωση, πρέπει να δημιουργήσετε μια άλλη εικόνα με λογότυπο, διπλάσιο του επιθυμητού μεγέθους στην οθόνη, π.χ. 500 x 500 px.
Τώρα πρέπει να λύσετε το κύριο πρόβλημα - πώς να βεβαιωθείτε ότι η εμφάνιση της εικόνας παραμένει πάντα η ίδια, δηλαδή το μέγεθός της είναι πάντα 250 x 250 px;
Ίσως κάποιος ήρθε αμέσως με την ιδέα να γράψει έναν απλό κώδικα CSS, κάτι σαν αυτό:
Img (μέγιστο πλάτος: 250 pixel; )
Παραδόξως, αλλά αυτή η μέθοδος δεν θα λειτουργήσει. Πρέπει να περιορίσετε το μέγεθος του κοντέινερ που περιέχει την εικόνα και όχι την ίδια την εικόνα. Θα πρέπει να αποδειχθεί κάτι σαν αυτό:
Div img (μέγιστο πλάτος: 250 px; )
Ποια είναι τα μειονεκτήματα αυτής της μεθόδου;
Εάν χρησιμοποιείται με αυτόν τον τρόποδιατάξεις για μικρές εικόνες, όπως λογότυπα ή εικονίδια, πιθανότατα δεν θα αντιμετωπίσετε προβλήματα. Ωστόσο, αυτή η μέθοδος δεν είναι κατάλληλη για μεγάλες απεικονίσεις. Σας αρέσει να ανεβάζετε τεράστιες εικόνες ειδικά για συσκευές αμφιβληστροειδούς που δεν θα μπορούν καν να εμφανίσουν όλες τις λεπτομέρειες της εικονογράφησης σας;!
Σκεφτείτε τους επισκέπτες του ιστότοπού σας. Τι λες σε έναν άνθρωπο που βιάζεται να διαβάσει σημαντικές πληροφορίεςαπό τον πόρο Ιστού σας, συνδεδεμένο μέσω μόντεμ usb, δεν πιάνετε πολύ καλά το σήμα επικοινωνίας; Φυσικά, μπορείτε να χάσετε ένα συγκεκριμένο μέρος του κοινού, αν δεν σκεφτείτε πώς να δημιουργήσετε σωστά ένα responsive σχέδιο για τον ιστότοπό σας.
Παρεμπιπτόντως, εάν θέλετε να αλλάξετε ελαφρώς τη σχεδίαση του ιστότοπου ανάλογα με την ταχύτητα σύνδεσης στην πλευρά του πελάτη, μπορείτε να χρησιμοποιήσετε το ειδικό βοηθητικό πρόγραμμα Foresight.js από τον Adam Bradley, το οποίο μετρά την ταχύτητα λήψης μιας εικόνας 50K.
Ένα άλλο μειονέκτημα της μεθόδου είναι ότι η αναλογία διαστάσεων μιας συμβατικής οθόνης και μιας οθόνης κινητού τηλεφώνου είναι διαφορετική. Επομένως, μια οριζόντια τεντωμένη εικόνα φόντου, όταν μειωθεί στο πλάτος της οθόνης σε ένα κινητό τηλέφωνο, θα φαίνεται μάλλον περίεργη, αφήνοντας πολύ κενό χώρο στο κάτω μέρος. Σε περίπτωση που κινητό τηλέφωνοΘα ήταν καλύτερα εάν ο web master θα μπορούσε να μεγεθύνει την εικόνα, να τονίσει το σημαντικό μέρος της και να τοποθετήσει αυτό το κομμάτι της εικόνας ως φόντο αντί για ολόκληρη την εικόνα.
Υπάρχει εναλλακτική;Αλλά υπάρχει ένας μεγάλος αριθμός απόεναλλακτικές λύσεις που σας επιτρέπουν να προσαρμόσετε τις εικόνες στην ανάλυση της οθόνης χωρίς να υπερφορτώνετε το κανάλι επικοινωνίας και χωρίς να επιβραδύνετε τη συσκευή του επισκέπτη του ιστότοπου.
Οι περισσότερες από αυτές τις μεθόδους βασίζονται σε συνδυασμό χρήσης σεναρίων που εκτελούνται τόσο από την πλευρά του πελάτη όσο και από την πλευρά του διακομιστή. Το πρώτο από αυτά, γραμμένο σε γλώσσα javascript, μάθετε τα πάντα για τις ιδιότητες της συσκευής που χρησιμοποιεί ο επισκέπτης του ιστότοπου και για την ταχύτητα της σύνδεσης στο Διαδίκτυο, ο τελευταίος μπορεί να ανεβάσει μια εικόνα της επιθυμητής ποιότητας, ανάλογα με τις πληροφορίες που λαμβάνει.
Οι σύγχρονοι προγραμματιστές έχουν δημιουργήσει έναν αρκετά μεγάλο αριθμό σεναρίων που εκτελούν παρόμοιες λειτουργίες. Ένα παράδειγμα είναι το σενάριο HiSRC Jquery που αναπτύχθηκε από τους Marc Grabanski και Christopher Schmitt, το οποίο σας επιτρέπει να κατεβάσετε μία από τις τρεις επιλογές για κάθε εικόνα, ανάλογα με τον τύπο της συσκευής του χρήστη και την ταχύτητα σύνδεσης στο Διαδίκτυο.
ΣΕ γενική εικόναΗ σήμανση HTML για αυτό το σενάριο μοιάζει με αυτό:
Στο χαρακτηριστικό src, πρέπει να καθορίσετε τη διαδρομή προς το αρχείο με την εικόνα που φορτώνεται πρώτα, συνήθως την ίδια την εικόνα. Χαμηλή ποιότητα. Μετά τη φόρτωση της σελίδας, το σενάριο θα ελέγξει την ταχύτητα σύνδεσης στο Διαδίκτυο και τον τύπο οθόνης της συσκευής από την οποία ο επισκέπτης εισήλθε στον ιστότοπο. Εάν το επιτρέπει η ταχύτητα Διαδικτύου και η συσκευή υποστηρίζει εικόνες "ρετιναρίσματος", θα φορτωθεί η εικόνα που βρίσκεται στη διεύθυνση που καθορίζεται στο χαρακτηριστικό data-2x. Εάν η συσκευή υποστηρίζει κανονικές εικόνες, η εικόνα θα φορτωθεί στη διεύθυνση στα δεδομένα -1x χαρακτηριστικό, και αν δεν επιτρέπει ταχύτητα Internet, τότε δεν θα γίνει καμία αλλαγή. Μια ειδική κλάση που προστίθεται σε μια εικόνα θα πει στο σενάριο ότι πρέπει να εκτελεστούν ορισμένοι μετασχηματισμοί σε αυτό το στοιχείο DOM.
Το ίδιο το σενάριο συνδέεται προσθέτοντας τον κώδικα:
$(document).ready(function()( $(".hisrc").hisrc(); ));
Όλα είναι πολύ απλά και δεν απαιτούν περιττό κόπο. Αρκεί να επιλέξετε τρεις διαφορετικές εικόνες για φόρτωση σε διαφορετικές καταστάσεις και ο ιστότοπός σας θα είναι έτοιμος να ξεκινήσει. Μπορείτε να δημιουργήσετε μια ξεχωριστή έκδοση αλλαγής μεγέθους της εικόνας ειδικά για κινητές συσκευές.
Η μέθοδος έχει επίσης μια σειρά από μειονεκτήματα. Αρχικά, πρέπει να συμπεριλάβετε επιπλέον τη βιβλιοθήκη Jquery. Δεύτερον, η μέθοδος απαιτεί συγκεκριμένη σήμανση HTML, η οποία μπορεί να μην είναι κατάλληλη για όλους τους webmasters, καθώς σε ορισμένες περιπτώσεις ο τρόπος εμφάνισης του -tag δεν μπορεί να αλλάξει.
Ένας ενδιαφέρον τρόπος δημιουργίας εικόνων με απόκριση προσφέρεται από την υπηρεσία Sencha.io Src (λειτουργεί ακόμα τη στιγμή που γράφονται αυτές οι γραμμές), η οποία δεν απαιτεί καθόλου ρυθμίσεις στον διακομιστή. Η υπηρεσία λειτουργεί σαν διακομιστής μεσολάβησης.
Απλώς τοποθετήστε το πρόθεμα http://src.sencha.io/ πριν από τη διεύθυνση εικόνας σας στο χαρακτηριστικό src και το Sencha.io Src θα φροντίσει για τα υπόλοιπα. Αυτό δωρεάν υπηρεσία, που λύνει τα περισσότερα προβλήματα ενός σύγχρονου σχεδιαστή ιστοσελίδων.
Τα μειονεκτήματα της υπηρεσίας περιλαμβάνουν το γεγονός ότι, χρησιμοποιώντας την, εξαρτάστε τον εαυτό σας από τη λειτουργία ενός εξωτερικού πόρου, τυχόν αποτυχίες στη λειτουργία του θα επηρεάσουν τον ιστότοπό σας, επομένως ΔΕΝ ΣΥΝΙΣΤΩ τη χρήση του, και όχι μόνο, αλλά και σε γενικά οποιεσδήποτε υπηρεσίες τρίτων.
συμπέρασμαΌπως μπορείτε να δείτε, υπάρχουν πραγματικά εναλλακτικούς τρόπουςπροετοιμασία αποκριτικών εικόνων για ιστότοπους. Αυτό το άρθρο δεν απαριθμεί όλες τις μεθόδους που είναι διαθέσιμες στους σύγχρονους χρήστες. Ο αριθμός των υπηρεσιών και των προσθηκών που σας επιτρέπουν να ελέγχετε την ανάλυση των εικόνων ανάλογα με τις ιδιότητες των συσκευών στις οποίες προβάλλεται ο ιστότοπος αυξάνεται καθημερινά. Οι πλοίαρχοι Ιστού δεν έχουν άλλη επιλογή από το να δοκιμάσουν καθένα από αυτά και να επιλέξουν τη μία ή την άλλη μέθοδο ανάλογα με τις πιεστικές εργασίες που έχουν να αντιμετωπίσουν.