Οι προσαρμοστικές εικόνες ή οι εικόνες που αποκρίνονται είναι ένας συνδυασμός μεθόδων για τη φόρτωση των σωστών εικόνων με βάση το μέγεθος της οθόνης ή τη συσκευή. Οι προσαρμοστικές εικόνες προσαρμόζονται αυτόματα ανάλογα με τα διαφορετικά μεγέθη οθόνης και συσκευές. Οι προσαρμοστικές εικόνες απαιτούν τη δημιουργία διαφορετικής διάταξης για κάθε συσκευή στην οποία θα έχει πρόσβαση η ιστοσελίδα. Οι προσαρμοστικές εικόνες μπορούν να δημιουργηθούν χρησιμοποιώντας το CSS Flexbox εύκολα. Το Flexbox είναι ένα μονοδιάστατο μοντέλο διάταξης CSS που δημιουργεί είτε γραμμές είτε στήλες. Το Flexbox διευκολύνει τη δημιουργία μιας δομής με απόκριση.
Αυτή η ανάρτηση θα παρέχει καθοδήγηση για τη δημιουργία προσαρμοστικών εικόνων με το CSS Flexbox.
Πώς να δημιουργήσετε προσαρμοστικές εικόνες με το CSS Flexbox;
Για να δημιουργήσουν προσαρμοστικές εικόνες χρησιμοποιώντας CSS, οι χρήστες Flexbox πρέπει πρώτα να δημιουργήσουν τη δομή HTML και στη συνέχεια να εφαρμόσουν CSS. Για μια πρακτική επίδειξη ακολουθήστε τις διαδικασίες που παρέχονται παρακάτω.
Δημιουργία δομής HTML
Δημιουργώ ένα Πρώτα, δημιουργήστε ένα Flexbox ρυθμίζοντας το ' απεικόνιση 'αξία ακινήτου σε' καλώδιο ' μεσα στην ' εικόνα-κοντέινερ ” Στη συνέχεια, εφαρμόστε το CSS στις εικόνες καθορίζοντας το ' img ' μαζί με ' .εικόνες-δοχείο ' όνομα. Πρώτα, ορίστε το ' καλώδιο 'αξία ακινήτου σε' 1 ” προκειμένου να κατανεμηθεί εξίσου ο διαθέσιμος ελεύθερος χώρος μεταξύ των εικόνων. Στη συνέχεια, ορίστε το ' μέγιστο πλάτος 'αξία ακινήτου σε' 100% ” για να διασφαλίσετε ότι οι εικόνες δεν υπερβαίνουν το αρχικό τους πλάτος. Ρυθμίστε το ' ύψος 'αξία ακινήτου σε' αυτο ” για να διατηρήσετε την αναλογία διαστάσεων. Τέλος, προσθέστε απόσταση μεταξύ των εικόνων ρυθμίζοντας το ' περιθώριο 'αξία ακινήτου σε' 10 εικονοστοιχεία ”: Οι προσαρμοστικές εικόνες που χρησιμοποιούν το CSS Flexbox έχουν δημιουργηθεί με επιτυχία. Η παρακάτω προβολή εξόδου βρίσκεται πριν από την αναδίπλωση του παραθύρου του προγράμματος περιήγησης: Τώρα, ας τυλίξουμε το παράθυρο του προγράμματος περιήγησης για να ελέγξουμε αν η εικόνα είναι προσαρμοστική δεν είναι: Για να δημιουργήσετε τις προσαρμοστικές εικόνες με το CSS Flexbox, ο χρήστης πρέπει πρώτα να δημιουργήσει τη δομή HTML και, στη συνέχεια, να ορίσει ετικέτα. Μέσα στο
προσθέστε το ' src ετικέτα για να καθορίσετε τη διαδρομή της εικόνας και να προσθέσετε την εναλλακτική εικόνα χρησιμοποιώντας το τα παντα Ετικέτα ':
< div τάξη = 'εικόνες-δοχείο' >
< img src = 'image-1.jpg' τα παντα = 'Πρώτη εικόνα' >
< img src = 'image-2.jpg' τα παντα = 'Δεύτερη εικόνα' >
div >
Εφαρμόστε CSS
απεικόνιση: καλώδιο ;
flex-wrap: τυλίξτε;
}
.εικόνες-κοντέινερ img {
καλώδιο: 1 ;
μέγιστο πλάτος: 100 % ;
ύψος: αυτόματο;
περιθώριο: 10 px;
}
Πριν την αναδίπλωση 
Μετά την αναδίπλωση 
Η παραπάνω εικόνα επιβεβαιώνει ότι οι εικόνες που προστέθηκαν είναι προσαρμοστικές. συμπέρασμα
ετικέτα. Στη συνέχεια, εφαρμόστε το CSS και μέσα στο CSS ορίστε την ιδιότητα 'display' σε ' καλώδιο ” προκειμένου να δημιουργήσετε το Flexbox. Αυτή η σύνταξη παρουσίασε τον περιεκτικό οδηγό για τη δημιουργία προσαρμοστικών εικόνων με το CSS Flexbox.