Πλάτος εικόνας σε HTML
Από προεπιλογή, οι εικόνες εμφανίζονται στο
πραγματικό τους μέγεθος. Για παράδειγμα, αυτή η εικόνα
με το χαμόγελο, που φορτώσαμε παραπάνω, έχει
πραγματικό μέγεθος 130 επί 130
pixels και το ίδιο μέγεθος βλέπουμε και στον
πρόγραμμα περιήγησης.
Αν θέλουμε, μπορούμε να αλλάξουμε το μέγεθος της εικόνας,
ορίζοντας της ένα πλάτος. Αυτό γίνεται με τη χρήση της ιδιότητας
width.
Για παράδειγμα, ας ορίσουμε στην εικόνα μας
πλάτος 100 pixels. Για αυτό, ως τιμή
της ιδιότητας width θα ορίσουμε τον αριθμό 100,
έτσι:
width="100"
Ποιο μέγεθος θα έχει η εικόνα στην οθόνη;
Μπορεί κανείς να σκεφτεί ότι θα είναι το εξής: πλάτος 100
pixels, όπως ορίσαμε, και πραγματικό ύψος
130, αφού δεν το ορίσαμε. Στην
πραγματικότητα, δεν θα είναι έτσι.
Το πλάτος πράγματι θα είναι 100 pixels,
ενώ το ύψος θα προσαρμοστεί έτσι ώστε οι αναλογίες
της εικόνας να μην αλλοιωθούν, δηλαδή θα γίνει και αυτό
100 pixels.
Ας το εκτελέσουμε και ας το διαπιστώσουμε:
<img src="smile.png" width="100">
:
Ορίστε στην εικόνα σας πλάτος 300
pixels.
