Επιλογές για την εικόνα HTML <img> height

HTML <img> ετικέτα

Ορισμός και χρήση

υψος ιδιότητα που καθορίζει το ύψος της εικόνας σε pixel.

Tip:Παρακαλώ ορίστε πάντα την υψος καθώς ιδιότητα ύψουςΕάν έχει οριστεί η ύψος και η πλάτος, θα προκαταφυλάσσει χώρο για την εικόνα κατά τη φόρτωση της σελίδας. Αντίθετα, αν δεν υπάρχουν αυτές οι ιδιότητες, ο περιηγητής δεν γνωρίζει το μέγεθος της εικόνας και δεν μπορεί να προκαταφυλάξει κατάλληλο χώρο γι' αυτήν. Αυτό μπορεί να προκαλέσει αλλαγές στη διάταξη της σελίδας κατά τη διάρκεια της φόρτωσης (όταν φορτώνει η εικόνα).

Tip:χρησιμοποιηση υψος καθώς шир Η ιδιότητα width επιβάλλει την κατεβάσματα του μεγάλου αρχείου εικόνας από τον χρήστη, ακόμα και αν φαίνεται μικρό στο χαρτί. Για να αποφύγετε αυτό, χρησιμοποιήστε λογισμικό επεξεργασίας εικόνας για να προσαρμόσετε το μέγεθος της εικόνας πριν την χρησιμοποιήσετε στη σελίδα.

Επεκτασιμότητα ανάγνωσης:Detailed explanation of height and width attributes

Παράδειγμα

Μια εικόνα 600 pixel σε ύψος και 500 pixel σε πλάτος:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Try it yourself

Γλώσσα

<img height="pixels">

Τιμή ιδιότητας

Τιμή Περιγραφή
pixels Καθορίστε το ύψος της εικόνας σε pixel (π.χ. height="100").

Περισσότερες παραδείξεις

Αλλαγή μεγέθους εικόνας - Δημιουργία γεμάτων εικονιδίων

Η ιδιότητα height και width έχει μια κρυφή ιδιότητα, δηλαδή δεν χρειάζεται να καθορίζεται το πραγματικό μέγεθος της εικόνας, δηλαδή αυτές οι τιμές μπορούν να είναι μεγαλύτερες ή μικρότερες από το πραγματικό μέγεθος. Ο browser θα προσαρμόσει αυτόματα την εικόνα, ώστε να ταιριάζει στο κρατούμενο χώρο. Με αυτόν τον τρόπο μπορείτε εύκολα να δημιουργήσετε εικόνες μικρού μεγέθους για μεγάλα εικόνα, καθώς και να μεγαλώσετε μικρές εικόνες. Ωστόσο, πρέπει να σημειωθεί ότι ο browser πρέπει να κατεβάσει το πλήρες αρχείο, ανεξάρτητα από το τελικό μέγεθος που θα εμφανιστεί, και αν δεν διατηρηθεί το αρχικό αναλογικό μέγεθος, η εικόνα θα τυπωθεί.

Μια άλλη τεχνική για τη χρήση των ιδιοτήτων height και width είναι η ευκολία με την οποία μπορείτε να γεμίσετε μια περιοχή της σελίδας, ενώ βελτιώνετε επίσης την απόδοση του έγγραφου. Σκεφτείτε ότι αν θέλετε να τοποθετήσετε μια κόλλα χρώματος στο έγγραφό σας. Δεν χρειάζεται να δημιουργήσετε μια εικόνα με πλήρη μέγεθος, αντίθετα, δημιουργήστε μια εικόνα με πλάτος και ύψος 1 pixel και προσθέστε το χρώμα που θέλετε. Στη συνέχεια, χρησιμοποιήστε τις ιδιότητες height και width για να την επεκτείνετε σε μεγαλύτερη διάσταση.

<img src="/i/ct_1px.gif" width="200px" height="30px" />

Αυτό είναι το αποτέλεσμα του παραπάνω HTML, η κόλλα χρώματος αυτή είναι φτιαγμένη από μια εικόνα με μόνο ένα pixel:

Χρήση ποσοστιαίων τιμών

Η τελευταία τεχνική για τη χρήση της ιδιότητας width είναι η χρήση ποσοστιαίων τιμών αντί για αμετάβλητων αξιών pixel. Αυτό θα κάνει τον browser να κλιμακώνει την εικόνα ανάλογα με το μέγεθος του παραθύρου του browser. Επομένως, αν θέλετε να δημιουργήσετε μια κολόνα χρώματος που έχει την ίδια διάσταση με το πλάτος του παραθύρου και ύψος 30 pixel, μπορείτε να το κάνετε ως εξής:

<img src="/i/ct_1px.gif" width="60%" height="30px" />

Όταν το μέγεθος του παράθυρου του έγγραφου αλλάζει, το μέγεθος αυτής της εικόνας αλλάζει επίσης:

Tip:Αν παρέχεται ένας τιμή width σε μορφή ποσοστιαίας και αγνοείται η height, ο浏览器 θα διατηρήσει το αναλογικό μέγεθος της εικόνας, αν και μεγαλώνει ή συρρικνώνεται. Αυτό σημαίνει ότι το ύψος και το πλάτος της εικόνας δεν θα αλλάξει, και η εικόνα δεν θα τυπωθεί.

Παρακαλώ δείτε το παρακάτω HTML:

<img src="/i/ct_1px.gif" width="20%" />

That is to say, if only the percentage value of the width attribute of the image ct_1px.gif is set, a rectangular image will be obtained (because the original ct_1px.gif is a rectangle with a width and height of only 1px):


Try it yourself

Tip:We provide the above examples to help you better understand the usage of height and width attributes. If you just need a large area of solid color block to decorate the page, a better way isUse CSS to create a background color.

Detailed explanation of height and width attributes

Why use height and width attributes

Have you ever seen the content of a document moving irregularly when it is loaded? This is because the browser constantly adjusts the page layout in order to display each loaded image. The browser decides the size of the image by downloading and parsing its width and height, and then leaves a corresponding rectangular space in the display window. Then the browser adjusts the display layout of the page to insert the image into the display. This also tells us that images are independent files and are loaded separately from the source files.

However, this is not the most effective way to display the document, because the browser must check each image file and calculate their screen space before displaying adjacent and subsequent document content. This may cause a significant delay in the display of the document, thereby interrupting the user's reading.

For creators, a more effective method is to specify the size of the image through the height and width attributes of the <img> tag. In this way, the browser reserves a position for the image before downloading it, which can accelerate the display of the document and avoid the movement of the document content. Both of these attributes require integer values and are represented in pixels. The order in which these attributes appear in the <img> tag does not matter.

The problem with height and width attributes

Although the height and width attributes of the <img> tag can improve performance and allow you to implement some small tricks, there are still some tricky negative effects when using them. Even if the user has turned off the automatic download image function, the browser still needs to display the reserved space for the image in the specified size. This usually leaves the reader with an empty frame, with a meaningless icon indicating the position where the image should be placed. At this time, the page will look very bad, as if it has not been completed at all, and most of the content is useless. If these specified sizes are not used, the browser will only place an image icon in the text, which at least allows some text to be read.

Για αυτό το πρόβλημα δεν έχουμε λύση, αλλά θα θέλαμε να επισημάνουμε ότι πρέπει να χρησιμοποιήσετε ιδιότητα alt και μερικάΚειμενο περιγραφήςΕτσι ο αναγνώστης θα τουλάχιστον γνωρίζει τι λείπει εδώ. Προτείνουμε να χρησιμοποιήσετε αυτές τις ιδιότητες του μεγέθους, επειδή ενθαρρύνουμε κάθε ενέργεια που βελτιώνει την απόδοση του δικτύου.

Υποστήριξη browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

HTML <img> ετικέτα