HTML <img> ιδιότητα width
Ορισμός και χρήση
width ιδιότητα καθορίζει το πλάτος της εικόνας σε pixel.
提示：να καθορίσετε για την εικόνα height και width ιδιότητα είναι καλή συνήθεια. Αν ρυθμίσετε αυτές τις ιδιότητες, μπορείτε να προκαταβάλετε χώρο για την εικόνα κατά την φόρτωση της σελίδας. Αν δεν υπάρχουν αυτές οι ιδιότητες, ο περιηγητής δεν μπορεί να καταλάβει το μέγεθος της εικόνας και δεν μπορεί να διατηρήσει κατάλληλο χώρο, οπότε η διάταξη της σελίδας θα αλλάξει όταν φορτωθεί η εικόνα (ακολουθεί μια λεπτομερής εξήγηση αυτού του πονήματος).
提示：μη χρησιμοποιήσετε height και width ιδιότητα για να επεκτείνετε την εικόνα. Αν χρησιμοποιήσετε height και width Αν η ιδιότητα χρησιμοποιείται για να συρρικνώσει την εικόνα, ο χρήστης πρέπει να κατεβάσει εικόνες υψηλής χωρητικότητας (ακόμα και αν η εικόνα φαίνεται μικρή στη σελίδα). Το σωστό είναι να επεξεργαστείτε την εικόνα με λογισμικό σε κατάλληλο μέγεθος πριν την χρησιμοποιήσετε στη σελίδα.
Περισσότερες πληροφορίες:详解 height 和 width 属性
Παράδειγμα
Ένα φωτογραφικό αρχείο 600 pixel ύψους και 500 pixel πλάτους:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Γλώσσα
<img width="pixels">
Αξία ιδιότητας
| Τιμή | Περιγραφή |
|---|---|
| pixels | Ορίζει το πλάτος της εικόνας σε pixel (π.χ. width="100"). |
Περισσότερες παραδείξεις
Αλλαγή μεγέθους εικόνας - Δημιουργία γεμιστών εικόνων
Οι ιδιότητες height και width έχουν μια κρυφή ιδιότητα, δηλαδή δεν χρειάζεται να καθορίζετε το πραγματικό μέγεθος της εικόνας, δηλαδή αυτές οι τιμές μπορούν να είναι μεγαλύτερες ή μικρότερες από το πραγματικό μέγεθος. Ο περιηγητής θα προσαρμόσει αυτόματα την εικόνα, ώστε να ταιριάζει στο διαθέσιμο χώρο. Με αυτόν τον τρόπο μπορείτε να δημιουργήσετε εύκολα μια μικρογραφία για μεγάλη εικόνα ή να μεγιστοποιήσετε μια μικρή εικόνα. Αλλά πρέπει να σημειωθεί ότι ο περιηγητής θα κατεβάσει το ολόκληρο αρχείο, ανεξάρτητα από το τελικό μέγεθος που θα εμφανιστεί, και αν δεν διατηρηθεί η αναλογία πλάτους και ύψους, η εικόνα θα γίνει στραμμένη.
Εναλλακτική χρήση των ιδιοτήτων height και width είναι η δυνατότητα να γεμίσετε εύκολα μια περιοχή της σελίδας, ενώ μπορείτε επίσης να βελτιώσετε την απόδοση του έγγραφου. Ας υποθέσουμε ότι θέλετε να τοποθετήσετε μια χρωματιστή μπάρα στον πίνακα σας. Δεν χρειάζεται να δημιουργήσετε μια εικόνα με πλήρες μεγέθη, αντίθετα, απλά δημιουργήστε μια εικόνα με πλάτος και ύψος 1 pixel και προσθέστε το χρώμα που θέλετε. Στη συνέχεια, χρησιμοποιήστε τις ιδιότητες height και width για να την επεκτείνετε σε μεγαλύτερη διάσταση.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Αυτό είναι το αποτέλεσμα του παραπάνω HTML, αυτή η χρωματιστή μπάρα δημιουργήθηκε από μια εικόνα με ένα μόνο pixel:
Χρήση ποσοστιαίων τιμών
Η τελευταία τεχνική για τη χρήση της ιδιότητας width είναι η χρήση ποσοστιαίων τιμών αντί για αθροισμάτων εκατοστιαίων. Αυτό θα κάνει τον περιηγητή να κλιμακώνει την εικόνα ανάλογα με ένα συγκεκριμένο ποσοστό από το πλάτος του παραθύρου του περιηγητή. Επομένως, αν θέλετε να δημιουργήσετε μια πλάτος ίσο με το πλάτος του παραθύρου και ύψος 30 εκατοστιαίων ποσοστιαίων, μπορείτε να το κάνετε ως εξής:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
Όταν το μέγεθος του παραθύρου του έγγραφου αλλάζει, το μέγεθος αυτής της εικόνας αλλάζει επίσης:
提示：Αν παρέχεται ένας δείκτης πλάτους σε μορφή ποσοστιαίας και παραλείπεται το ύψος, τότε και αν επεκταθεί ή συσφίξουν, ο περιηγητής θα διατηρήσει το αναλογία πλάτους και ύψους της εικόνας. Αυτό σημαίνει ότι το ύψος της εικόνας σε σχέση με το πλάτος της δεν θα αλλάξει, και η εικόνα δεν θα γίνει στραμμένη.
Παρακαλώ δείτε το παρακάτω HTML:
<img src="/i/ct_1px.gif"} width="20%" />
也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：
提示：我们提供以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是使用 CSS 来创建背景色.
详解 height 和 width 属性
为什么要使用 height 和 width 属性
你是否见过当文档加载时其内容会显示不规则的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。
但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。
对于创作者来说，一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都需要是整数值，并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的顺序并不重要。
height 和 width 属性的问题
尽管 <img> 标签的 height 和 width 属性可以改善性能并允许你实现一些小技巧，但在使用它们时仍然存在一些棘手的负面效果。即使用户已经关闭了自动下载图像的功能，浏览器仍然需要以指定的尺寸显示为图像预留的空间。这样留给读者的通常是一个空的框架，其中有一个毫无意义的图标，表示这是放置图像的位置。这时页面将显得非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不使用这些指定的尺寸，则浏览器将在文本中仅放置一个图像图标，这样至少还有一些文字可以阅读。
Για αυτό το πρόβλημα δεν έχουμε λύση, μπορούμε μόνο να υπογραμμίσουμε ότι πρέπει να χρησιμοποιήσετε ιδιότητα alt καιΠεριγραφικά κείμεναΕτσι, ο αναγνώστης τουλάχιστον θα γνωρίζει τι λείπει εδώ. Προτείνουμε να χρησιμοποιήσετε αυτές τις ιδιότητες μέγεθους,因为我们 ενθαρρύνουμε κάθε συμπεριφορά που βελτιώνει την απόδοση του δικτύου.
Υποστήριξη προγράμματος περιήγησης
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη | Υποστήριξη |
