Η ετικέτα img

Η ετικέτα img δημιουργεί μια εικόνα. Η διαδρομή προς την εικόνα ορίζεται στο χαρακτηριστικό src. Δεν απαιτεί ετικέτα κλεισίματος.

Χαρακτηριστικά

Χαρακτηριστικό	Περιγραφή
src	Ορίζει τη διαδρομή προς την εικόνα. Υποχρεωτικό χαρακτηριστικό.
alt	Εναλλακτικό κείμενο, το οποίο θα εμφανιστεί αντί της εικόνας, αν αυτή δεν βρεθεί (για παράδειγμα, αν η διαδρομή προς αυτή είναι λανθασμένη). Υποχρεωτικό χαρακτηριστικό. Σε περίπτωση απουσίας του, ο επικυρωτής (πρόγραμμα που ελέγχει την ορθότητα HTML ή CSS) θα προβάλει σφάλμα.
width	Το πλάτος της εικόνας, σε pixels (σε αυτή την περίπτωση δεν ορίζονται μονάδες μέτρησης) ή σε ποσοστό του γονέα της εικόνας.
height	Το ύψος της εικόνας, σε pixels (σε αυτή την περίπτωση δεν ορίζονται μονάδες μέτρησης) ή σε ποσοστό του γονέα της εικόνας.

Αναλογίες

Αν για μια εικόνα δεν οριστεί ούτε πλάτος, ούτε ύψος - η εικόνα θα έχει το πραγματικό της μέγεθος. Αν οριστεί ύψος - η εικόνα θα πάρει το καθορισμένο ύψος, και το πλάτος θα προσαρμοστεί έτσι ώστε οι αναλογίες της να μην αλλοιωθούν.

Αν οριστεί μόνο πλάτος - ανάλογα, η εικόνα θα προσαρμοστεί στο ύψος έτσι ώστε να διατηρηθούν οι αναλογίες.

Αν οριστούν και πλάτος, και ύψος - οι αναλογίες της εικόνας μπορεί να αλλοιωθούν (ή και όχι, ανάλογα με την τύχη σας). Αν το πλάτος ή το ύψος (ή και τα δύο μαζί) είναι μεγαλύτερα από το πραγματικό - η εικόνα θα μεγεθυνθεί, αλλά θα χάσει σε ποιότητα.

Συνιστάται να ορίζετε το πλάτος και το ύψος των εικόνων στα χαρακτηριστικά (και όχι μέσω CSS) - με αυτόν τον τρόπο ο φυλλομετρητής θα φορτώνει πιο γρήγορα τις εικόνες - δεν χρειάζεται να υπολογίζει το μέγεθος κάθε εικόνας αφού την λάβει.

Δεν συνιστάται να μειώνετε τα πραγματικά μεγέθη μιας εικόνας χωρίς ανάγκη. Για παράδειγμα, το πραγματικό μέγεθος μιας εικόνας είναι 1000 επί 1000 pixels, και εσείς της ορίζετε πλάτος 100px. Σε αυτή την περίπτωση, η εικόνα στην οθόνη θα εμφανίζεται σε 100 pixels, ωστόσο θα έχει μέγεθος ολόκληρων των χιλίων και, κατά συνέπεια, θα φορτώνεται πολύ πιο αργά.

Παράδειγμα

Ας προσθέσουμε μια εικόνα στον ιστότοπο και ας μην ορίσουμε τα χαρακτηριστικά height και width. Η εικόνα θα έχει το πραγματικό της μέγεθος:

:

Παράδειγμα

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

:

Παράδειγμα

Και τώρα ας προσθέσουμε στην εικόνα ύψος χρησιμοποιώντας το χαρακτηριστικό height, το πλάτος στην περίπτωση αυτή θα προσαρμοστεί έτσι ώστε να διατηρηθούν οι αναλογίες της εικόνας:

:

Παράδειγμα

Ας προσθέσουμε ταυτόχρονα στην εικόνα και ύψος, και πλάτος. Οι αναλογίες της εικόνας στην περίπτωση αυτή θα πρέπει να αλλοιωθούν (όχι απαραίτητα, αλλά σε αυτή την περίπτωση το ύψος και το πλάτος επιλέχθηκαν έτσι, ώστε οι αναλογίες να αλλοιωθούν):

:

Παράδειγμα

Ας βάλουμε λανθασμένη διαδρομή προς την εικόνα (για απλότητα ας την αφήσουμε κενή). Αντί της εικόνας θα δούμε το περιεχόμενο του χαρακτηριστικού alt (φαίνεται σαν να είναι συνηθισμένο κείμενο - αλλά δοκιμάστε να το αντιγράψετε - δεν θα τα καταφέρετε, θα τραβιέται σαν εικόνα):

:

Δείτε επίσης