Οι ιδιότητες height και width του στοιχείου <img> του HTML
Παράδειγμα
Ρυθμίστε το πλάτος και το ύψος της εικόνας σε 200 εικονοστοιχεία:
<img src="/i/mouse.jpg" height="200" width="200" />
Ορισμός και χρήση
Η ιδιότητα height και width του στοιχείου <img> ρυθμίζει το μέγεθος της εικόνας.
Σημείωση:Η καθορισμός των ιδιοτήτων height και width για την εικόνα είναι μια καλή συνήθεια. Αν καθοριστούν αυτές οι ιδιότητες, μπορεί να προκαταβάλετε χώρο για την εικόνα κατά τη φόρτωση της σελίδας. Αν δεν καθοριστούν αυτές οι ιδιότητες, ο περιηγητής δεν μπορεί να γνωρίζει το μέγεθος της εικόνας και δεν μπορεί να διατηρήσει κατάλληλο χώρο, οπότε η διάταξη της σελίδας θα αλλάξει όταν η εικόνα φορτωθεί. (Η συνέχεια εξηγεί αυτήν την άποψη).
Σημείωση:Δεν πρέπει να κλιμακώνετε εικόνες μέσω των ιδιοτήτων height και width. Αν κλιμακώσετε εικόνες μέσω των ιδιοτήτων height και width, ο χρήστης θα πρέπει να κατεβάσει εικόνες υψηλής απόδοσης (ακόμα και αν η εικόνα φαίνεται μικρή στη σελίδα). Το σωστό είναι να επεξεργαστείτε την εικόνα σε κατάλληλο μέγεθος με λογισμικό πριν την χρησιμοποιήσετε στη σελίδα.
Εκτενέστερη ανάγνωση:Επεξήγηση των ιδιοτήτων height και width
Περισσότερες παραδείξεις
Αλλαγή μεγέθους εικόνας - Δημιουργία γεωμετρικών εικόνων
Οι ιδιότητες height και width έχουν μια κρυφή ιδιότητα, δηλαδή δεν χρειάζεται να καθορίζεται το πραγματικό μέγεθος της εικόνας, δηλαδή αυτές οι τιμές μπορούν να είναι μεγαλύτερες ή μικρότερες από το πραγματικό μέγεθος. Ο περιηγητής θα προσαρμόσει αυτόματα την εικόνα, ώστε να ταιριάζει στο κενό που έχει προοριστεί. Με αυτόν τον τρόπο μπορείτε εύκολα να δημιουργήσετε μικρογραφίες για μεγάλες εικόνες και να μεγαλώσετε μικρές εικόνες. Ωστόσο, πρέπει να σημειωθεί ότι ο περιηγητής θα κατεβάσει ολόκληρο το αρχείο, ανεξάρτητα από το τελικό μέγεθος που θα εμφανιστεί, και αν δεν διατηρηθεί το αρχικό αναλογικό διάσταμα, η εικόνα θα στρεφεί.
Μια άλλη τεχνική που μπορεί να χρησιμοποιηθεί με τις ιδιότητες height και width είναι η εύκολη γεωμετρία της περιοχής της σελίδας, ενώ βελτιώνει επίσης την απόδοση του έγγραφου. Φανταστείτε ότι θέλετε να τοποθετήσετε μια χρωματιστή λωρίδα στο έγγραφο. Δεν χρειάζεται να δημιουργήσετε μια εικόνα με πλήρες διαστάματα, αντίθετα, πρέπει να δημιουργήσετε μια εικόνα με πλάτος και ύψος 1 pixel και να της δώσετε τη χρώση που θέλετε. Στη συνέχεια, χρησιμοποιήστε τις ιδιότητες height και width για να την επεκτείνετε σε μεγαλύτερο μέγεθος.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
Αυτό είναι το αποτέλεσμα του παραπάνω κώδικα HTML, αυτή η χρωματιστή λωρίδα είναι κατασκευασμένη από μια εικόνα με μόνο ένα pixel:
Χρήση ποσοστιαίων τιμών
Η τελευταία τεχνική που χρησιμοποιείται με την ιδιότητα width είναι η χρήση ποσοστιαίων τιμών αντί για α绝对的 τιμές pixel. Αυτό θα κάνει τον περιηγητή να κλιμακώνει την εικόνα ανάλογα με το μέγεθος του παραθύρου της προβολής. Επομένως, αν θέλετε να δημιουργήσετε μια κόκκινη οριζόντια λωρίδα με πλάτος ίσο με το πλάτος του παραθύρου προβολής και ύψος 30 pixel, μπορείτε να το κάνετε ως εξής:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
Όταν το μέγεθος του παράθυρου του έγγραφου αλλάζει, το μέγεθος της εικόνας αλλάζει επίσης:
Σημείωση:Εάν παρέχεται μια τιμή width σε μορφή ποσοστιαίας και αγνοείται η height, ο περιηγητής θα διατηρήσει το αναλογικό διάσταμα της εικόνας, είτε μειώνει είτε αυξάνει. Αυτό σημαίνει ότι το ύψος και το πλάτος της εικόνας δεν θα αλλάξουν, και η εικόνα δεν θα στρεφεί.
Δείτε το παρακάτω HTML:
<img src="/i/ct_1px.gif" width="20%" />
Αυτό σημαίνει ότι αν ρυθμίσετε μόνο το ποσοστό του πλάτους της εικόνας ct_1px.gif, θα��ήσετε μια ορθογώνια εικόνα (αυτό συμβαίνει επειδή το αρχείο ct_1px.gif είναι μια ορθογώνια εικόνα με πλάτος και ύψος 1px):
Σημείωση:Μπορείτε να δοκιμάσετε το εργαλείο μας για在线 δοκιμέςΔοκιμάστε το προσωπικά!
Σημείωση:Στόχος μας με τα παραδείγματα είναι να σας βοηθήσουμε να κατανοήσετε καλύτερα τη χρήση των ιδιοτήτων height και width. Αν χρειάζεστε μεγάλα, ομοιόμορφα χρώματα για να διακοσμήσετε τη σελίδα, μια καλύτερη μέθοδος είναιΣημείωση: Χρησιμοποιήστε CSS για να δημιουργήσετε χρώματα φόντου.
Υποστήριξη περιηγητών
Όλοι οι περιηγητές υποστηρίζουν τις ιδιότητες height και width.
Γραμματική
<img height="value" />
ή:
<img width="value" />
Αξία ιδιοτήτων
| Αξία | Περιγραφή |
|---|---|
| pixels | Αξίες ύψους ή πλάτους ως εκατοστά. |
| percent | Αξίες ύψους ή πλάτους ως ποσοστό του περιεχομένου του στοιχείου που περιέχει. |
Παράδειγμα TIY
- Προσαρμογή μεγέθους εικόνας
- Αυτό το παράδειγμα δείχνει πώς να προσαρμόζετε το μέγεθος των εικόνων σε διαφορετικά μεγέθη.
Επεξήγηση των ιδιοτήτων height και width
Γιατί να χρησιμοποιούμε τις ιδιότητες height και width;
Έχετε δει ποτέ το περιεχόμενο ενός έγγραφου να εμφανίζεται με ακατάστατο τρόπο κατά τη φόρτωση; Αυτό συμβαίνει επειδή ο περιηγητής επαναπροσαρμόζει τη διάταξη της σελίδας για να εμφανίσει κάθε φορτωμένη εικόνα, αποφασίζοντας το μέγεθος της με βάση το πλάτος και το ύψος της εικόνας που κατεβάζει και αφήνοντας μια αντίστοιχη ορθογώνια περιοχή στη φόρτα. Σε συνέχεια, ο περιηγητής προσαρμόζει τη διάταξη της σελίδας για να ενσωματώσει την εικόνα.
Αλλά αυτό δεν είναι η πιο αποτελεσματική μέθοδος εμφάνισης του έγγραφου, γιατί ο περιηγητής πρέπει να ελέγξει και να υπολογίσει το χώρο οθόνης κάθε εικόνας πριν εμφανίσει τα παρακείμενα και τα επόμενα περιεχόμενα, κάτι που μπορεί να προκαλέσει σημαντική καθυστέρηση στην εμφάνιση του έγγραφου και να διακόψει την ανάγνωση του χρήστη.
Για τους δημιουργούς, μια πιο αποτελεσματική μέθοδος είναι να καθορίσετε το μέγεθος της εικόνας μέσω των ιδιοτήτων height και width του ετικέτας <img>. Με αυτόν τον τρόπο, ο περιηγητής προετοιμάζει μια θέση για την εικόνα πριν την κατεβάσει, κάτι που επιταχύνει την εμφάνιση του έγγραφου και αποτρέπει τη μετακίνηση του περιεχομένου.
Το πρόβλημα με τις ιδιότητες height και width
Αν και οι ιδιότητες height και width του ετικέτας <img> μπορούν να βελτιώσουν την απόδοση και να σας επιτρέψουν να επιτύχετε μερικές μικρές τεχνικές, υπάρχουν κάποιες δυσκολίες και αρνητικές επιπτώσεις που πρέπει να αντιμετωπίσετε κατά τη χρήση τους.Ακόμα και αν ο χρήστης έχει απενεργοποιήσει τη λειτουργία αυτόματης λήψης εικόνων, ο περιηγητής θα πρέπει να δείξει τον χώρο που θα καταλαμβάνει η εικόνα με το καθορισμένο μέγεθος.Για τον αναγνώστη, αυτό συνήθως σημαίνει ότι θα δείξει έναν κενό πλαίσιο με έναν χωρίς νόημα εικονίδιο που δείχνει ότι αυτό είναι το σημείο όπου θα τοποθετηθεί η εικόνα.Σε αυτή την περίπτωση, η σελίδα θα φαίνεται πολύ κακή, όπως αν δεν είχε ολοκληρωθεί, και η maggiorية του περιεχομένου θα είναι άχρηστη.Αν δεν χρησιμοποιήσετε τα καθορισμένα μεγέθη, ο περιηγητής θα τοποθετήσει απλώς ένα εικονίδιο εικόνας στο κείμενο, το οποίο θα δείξει τουλάχιστον κάτι από το κείμενο που μπορεί να διαβαστεί.
Για αυτό το πρόβλημα δεν έχουμε λύση, μπορούμε μόνο να τονίσουμε ότι πρέπει να χρησιμοποιήσετε ιδιότητα altκαι μερικάΚειμενική περιγραφήΌπως αυτό, ο αναγνώστης τουλάχιστον γνωρίζει τι λείπει εδώ. Προτείνουμε να χρησιμοποιήσετε αυτές τις ιδιότητες μέγεθους,因为我们 ενθαρρύνουμε κάθε ενέργεια που βελτιώνει την απόδοση του δικτύου.
