Η HTML μας επιτρέπει να χρησιμοποιούμε εικόνες σε ιστοσελίδες και να τις κάνουμε πιο ελκυστικές εφαρμόζοντας διαφορετικά στυλ. Εάν πρέπει να αλλάξετε την αναλογία διαστάσεων της εικόνας ή η εικόνα σας δεν ταιριάζει με τη διάταξη της ιστοσελίδας σας, μπορείτε να αλλάξετε το μέγεθός της. Για το σκοπό αυτό, μπορείτε να χρησιμοποιήσετε το « πλάτος ' και ' ύψος ' ακίνητα στο ' img ετικέτα '. Αυτές οι τιμές ιδιοτήτων μπορούν εύκολα να οριστούν σε εικονοστοιχεία CSS.

Σε αυτό το εγχειρίδιο, θα μάθετε τη μέθοδο αλλαγής μεγέθους της εικόνας σε HTML.

Πριν ξεκινήσετε, απαιτείται η προσθήκη της εικόνας στο αρχείο HTML στο οποίο θα εκτελεστεί η λειτουργία αλλαγής μεγέθους εικόνας.

Πώς να ενσωματώσετε μια εικόνα σε HTML;

Για να προσθέσετε μια εικόνα σε HTML, χρησιμοποιήστε την ακόλουθη σύνταξη:

Η περιγραφή της προαναφερθείσας σύνταξης περιγράφεται παρακάτω. Ο ' img Η ετικέτα χρησιμοποιεί δύο χαρακτηριστικά:

• • 'src' χρησιμοποιείται για την παροχή της διαδρομής (URL) της εικόνας.
  • 'τα παντα' χρησιμοποιείται για την παροχή του εναλλακτικού κειμένου εάν η εικόνα δεν εμφανίζεται.

HTML

Ο παρακάτω κώδικας αντιπροσωπεύει δύο div. Στο πρώτο div, προσθέσαμε μια επικεφαλίδα στο επάνω κέντρο της ιστοσελίδας μας ως ' Μέγεθος εικόνας σε HTML ' χρησιμοποιώντας την ετικέτα

:

< div >
< κέντρο >
< h1 > Μέγεθος εικόνας σε HTML h1 >
κέντρο >
div >

Το δεύτερο div προστίθεται με την κλάση με το όνομα ' δοχείο ” και για να αναπαραστήσουμε την εικόνα στο κέντρο, χρησιμοποιήσαμε την ετικέτα

. Μέσα στο κέντρο, γράψτε τον παρακάτω κώδικα για να προσθέσετε μια εικόνα:

< div τάξη = 'δοχείο' >
< κέντρο >
< img src = 'images/butterfly.jpg' τα παντα = 'εναλλακτικό κείμενο' >
κέντρο >
div >

Η επιλεγμένη εικόνα με ' 640*437 Ο λόγος διαστάσεων θα μοιάζει με αυτό:

Η επόμενη ενότητα θα δείξει τη μέθοδο αλλαγής μεγέθους μιας εικόνας.

Πώς να αλλάξετε το μέγεθος της εικόνας σε HTML;

Μπορείτε να προσαρμόσετε το μέγεθος της εικόνας ή να αλλάξετε το μέγεθός της χρησιμοποιώντας το ' πλάτος ' και ' ύψος ” για να ορίσετε το πλάτος και το ύψος του.

Τώρα, ας ορίσουμε την τιμή πλάτους της προστιθέμενης εικόνας ως ' 300 ” και δείτε πώς λειτουργεί:

< img src = 'images/butterfly.jpg' τα παντα = 'εναλλακτικό κείμενο' πλάτος = '300' >

Μπορεί να φανεί ότι το πλάτος της εικόνας έχει αλλάξει και το μέγεθός της έχει αλλάξει με επιτυχία:

Εκτός από το πλάτος, το « ύψος Το χαρακτηριστικό ' μπορεί επίσης να χρησιμοποιηθεί για τον ίδιο σκοπό. Για να δείτε τη διαφορά μεγέθους, ορίστε ' 550 ' pixel ως ύψος εικόνας:

< img src = 'images/butterfly.jpg' τα παντα = 'εναλλακτικό κείμενο' πλάτος = '300' ύψος = '550' >

Μπορείτε να παρατηρήσετε ξεκάθαρα τη διαφορά στο μέγεθος της εικόνας:

Έτσι χρησιμοποιούνται οι ιδιότητες πλάτους και ύψους για την αλλαγή μεγέθους της εικόνας.

συμπέρασμα

Σε HTML, το ' ύψος ' και ' πλάτος Τα χαρακτηριστικά χρησιμοποιούνται για την αλλαγή του μεγέθους της εικόνας. Μπορείτε να αλλάξετε την προεπιλεγμένη αναλογία διαστάσεων της προστιθέμενης εικόνας ορίζοντας τις τιμές αυτών των χαρακτηριστικών. Ως αποτέλεσμα, μπορεί να φανεί μια σαφής διαφορά σε σχέση με το μέγεθος της εικόνας. Αυτό το ιστολόγιο έχει δείξει τη μέθοδο χρήσης των ιδιοτήτων ύψους και βάρους για την αλλαγή μεγέθους εικόνων σε HTML.