Μια αποκριτική εικόνα είναι αυτή που μπορεί να προσαρμοστεί σε διαφορετικές συσκευές, ανεξάρτητα από τα μεγέθη οθόνης. Η ύπαρξη μιας ανταποκριτικής εικόνας στον ιστότοπο έχει γίνει τόσο κρίσιμο στις μέρες μας. Καθώς όχι μόνο επιταχύνει τον ιστότοπο, αλλά προσφέρει επίσης μια δροσερή εμπειρία χρήστη σε όλες τις συσκευές. Οι αποκριτικές εικόνες θα αλλάξουν επίσης το μέγεθος με αλλαγή μεγέθους του προγράμματος περιήγησης.
Οι αποκριτικές εικόνες προσαρμόζονται αποτελεσματικά σε διαφορετικά μεγέθη οθόνης σε διαφορετικές συσκευές. Εξασφαλίζει τη διατήρηση της ποιότητας. Ένας ανταποκρινόμενος ιστότοπος με αποκριτικές εικόνες σίγουρα αυξάνει τα ποσοστά αφοσίωσης και μετατροπών. Οι εικόνες μπορούν να ανταποκρίνονται χρησιμοποιώντας CSS μαζί με ερωτήματα πολυμέσων.
Αυτή η εγγραφή θα χρησιμοποιεί HTML και CSS για να κάνει τις εικόνες να ανταποκρίνονται.
Πώς να κάνετε τις εικόνες να ανταποκρίνονται με HTML και CSS;
Για να κάνετε τις εικόνες να ανταποκρίνονται χρησιμοποιώντας HTML και CSS, ακολουθήστε τα παρακάτω βήματα:
- Χρησιμοποιήστε την ιδιότητα 'max-width'.
- Χρησιμοποιήστε την ιδιότητα 'width'.
- Εφαρμογή ερωτημάτων πολυμέσων.
Μέθοδος 1: Χρησιμοποιήστε την ιδιότητα 'max-width'.
Η πρώτη μέθοδος για να κάνετε μια εικόνα να ανταποκρίνεται είναι χρησιμοποιώντας το ' μέγιστο πλάτος ” ιδιοκτησία. Ο ' μέγιστο πλάτος Η ιδιότητα ' χρησιμοποιείται για τον καθορισμό του μέγιστου πλάτους της εικόνας. Σε περίπτωση που το περιεχόμενο υπερβαίνει το μέγιστο πλάτος, θα αλλάξει το ύψος του στοιχείου.
Δημιουργία HTML
Για να προσθέσετε ένα αρχείο εικόνας στην ετικέτα
του HTML, οι χρήστες πρέπει να χρησιμοποιήσουν την ετικέταΠροσθήκη CSS
Τώρα, δημιουργήστε ένα εξωτερικό αρχείο CSS αποθηκεύστε το με το '. css ” επέκταση αρχείου και συνδέστε το μέσα στην ετικέτα
του αρχείου HTML. Για να διαμορφώσετε το αρχείο εικόνας στο αρχείο CSS, ξεκινήστε με την ετικέτα img και ανοίξτε τα σγουρά άγκιστρα. Στη συνέχεια, μέσα στο σγουρό στήριγμα, προσθέστε το ' μέγιστο πλάτος: 100% ;” για να χωρέσει την εικόνα οριζόντια μέσα στο δοχείο. Επιπλέον, θα αποτρέψει την κοπή εικόνων. Μετά από αυτό, προσθέστε ' ύψος: αυτόματο ;” για να ρυθμίσετε αυτόματα το ύψος, ώστε η εικόνα να εμφανίζεται σωστά:img {
μέγιστο πλάτος : 100% ;
ύψος : αυτο ;
}
Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης για να ελέγξετε την κλίμακα της εικόνας.
Μέθοδος 2: Χρησιμοποιήστε την ιδιότητα 'width'.
Μια άλλη μέθοδος για να κάνετε μια εικόνα να ανταποκρίνεται είναι χρησιμοποιώντας την ιδιότητα ' πλάτος '. Η ιδιοκτησία ' πλάτος ” ορίζει το πλάτος για τις εικόνες και το κείμενο. Δεν περιέχει περιθώρια, γέμιση ή περιγράμματα. Μπορεί να ορίσει το μέγεθος των εικόνων και του κειμένου σε μορφή cm, px ή %. Για να κάνετε μια εικόνα να ανταποκρίνεται, απλώς αντιστοιχίστε το ' πλάτος ' ιδιοκτησία σε ' 100 %”. Ρύθμιση ' πλάτος: 100% ;” σημαίνει ότι κάνει την εικόνα τόσο μεγάλη όσο το γονικό στοιχείο:
img {πλάτος : 100% ;
ύψος : αυτο ; }
Τα παραπάνω επιβεβαιώνουν ότι η εικόνα ανταποκρίνεται. Για να ελέγξετε αν αποκρίνεται ή όχι, απλώς αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης.
Μέθοδος 3: Εφαρμογή ερωτημάτων πολυμέσων
Τα ερωτήματα μέσων CSS βοηθούν τους χρήστες να τροποποιήσουν την εμφάνιση μιας ιστοσελίδας. Το ερώτημα πολυμέσων CSS περιέχει συνθήκες, όποτε πληρούνται αυτές οι προϋποθέσεις, θα αλλάξει την εμφάνιση της συσκευής ή του προγράμματος περιήγησης. Τα ερωτήματα πολυμέσων μπορούν επίσης να βοηθήσουν τους χρήστες να κάνουν τις εικόνες να ανταποκρίνονται. Για το λόγο αυτό, πρώτα, καθορίστε το '@ μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ Κάντε ετικέτα και στη συνέχεια καθορίστε το μέγιστο πλάτος ιδιότητα ” και εκχωρήστε το μέγιστο πλάτος για μια εικόνα εντός των αγκύλων. Όποτε πληρούται αυτή η συνθήκη, η εικόνα θα ανταποκρίνεται. Μετά από αυτό, προσθέστε τα σγουρά άγκιστρα προσδιορίστε την ετικέτα img και καθορίστε το ' πλάτος: 100% ;” αξία:
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ ( μέγιστο πλάτος : 480 εικονοστοιχεία ) {img {
πλάτος : 100% ;
}
}
Σημείωση : η εικόνα θα ανταποκρίνεται μόνο εάν πληροί την καθορισμένη συνθήκη.
Το ερώτημα μέσων CSS έχει εφαρμοστεί και τώρα η εικόνα θα συμπεριφέρεται ως αποκριτική εάν αλλάξει το μέγεθός της στο καθορισμένο μέγεθος εικόνας. Διαφορετικά, δεν θα ανταποκρίνεται:
συμπέρασμα
Για να κάνουν τις εικόνες να ανταποκρίνονται με HTML και CSS, οι χρήστες έχουν διάφορες μεθόδους. Αυτές οι μέθοδοι περιλαμβάνουν την απόκριση των εικόνων χρησιμοποιώντας ' μέγιστο πλάτος 'περιουσία', πλάτος ιδιότητα, καθώς και με την εφαρμογή του ερωτήματος μέσων CSS. Αυτό το άρθρο παρουσίασε στους χρήστες την πλήρη λύση για να κάνουν τις εικόνες να ανταποκρίνονται.