Ανταπόκριση Εικόνες Made Easy με ResponsifyJS

Ο σύγχρονος ιστός θα πρέπει να ανταποκρίνεται 100% και οι νεότερες βιβλιοθήκες καθιστούν αυτό όλο και πιο δυνατό.

Με δωρεάν πρόσθετα, όπως ResponsifyJS, είναι ακόμα πιο εύκολο να κάνετε τους ιστότοπούς σας να εργάζονται σε όλες τις συσκευές. Αυτό δωρεάν plugin jQuery παίρνει ένα δοχείο από εικόνες και τα αναδιατάσσει δυναμικά με βάση τα διαφορετικά μεγέθη οθόνης.

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

Το plugin Responsify δημιουργήθηκε για να λύσει αυτό το ακριβές πρόβλημα. Μπορεί να λειτουργήσει αυτόματα αλλά η πραγματική μαγεία βρίσκεται μέσα ορίζοντας τη δική σας περιοχή εστίασης στην εικόνα.

Χρησιμοποιεί ένα εσωτερικό σύστημα δεκαδικών περιγραφών για να βρείτε πού πρέπει να είναι η εστίαση της εικόνας. Για παράδειγμα, μπορείτε καθορίστε τις θέσεις όπως εστίαση δεδομένων-κορυφή οι οποίες “μπλοκ” ένα συγκεκριμένο τμήμα της εικόνας.

Αυτά τα δεδομένα πρέπει να περάσουν με τη μορφή δεκαδικών, για παράδειγμα .5 δεκαδικοί στόχοι 50% της εικόνας (αριστερά / δεξιά ή πάνω / κάτω). Φυσικά, αυτό είναι αρκετά συγκεχυμένο να κάνετε μόνοι σας. Αλλά, υπάρχει α δωρεάν εφαρμογή Responsise που σας επιτρέπει υπολογίστε τις θέσεις δυναμικά στο πρόγραμμα περιήγησής σας.

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

Μπορείτε να βρείτε αρκετά ζωντανές συνδέσεις demo στο repos GitHub, συμπεριλαμβανομένων αποσπασμάτων κώδικα για αντιγραφή / επικόλληση στον ιστότοπό σας.

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

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