Προσθέστε εικόνες στο Markdown και Τροποποιήστε το μέγεθος εικόνας

Για την προσθήκη εικόνων στο Markdown:

Η σύνταξη δίνεται παρακάτω.

Για την τροποποίηση του μεγέθους της εικόνας στο Markdown:

Για την τροποποίηση του μεγέθους της εικόνας στο Markdown, χρησιμοποιούμε την ετικέτα « » του HTML. Μόνο αυτή η ετικέτα βοηθά στην τροποποίηση του μεγέθους της εικόνας στο Markdown και η σύνταξη αυτής της ετικέτας « » δίνεται παρακάτω.

Μπορούμε να αλλάξουμε το μέγεθος της εικόνας ορίζοντας τις τιμές του πλάτους και του ύψους σε αριθμούς αλλά και σε ποσοστά. Μπορούμε επίσης να χρησιμοποιήσουμε το χαρακτηριστικό style σε αυτήν την ετικέτα « » για την τροποποίηση του μεγέθους της εικόνας στο Markdown.

Παράδειγμα #01:

Χρησιμοποιούμε τον κώδικα του Visual Studio για την εκτέλεση των κωδικών Markdown. Για τους κωδικούς Markdown, πρέπει να ανοίξουμε τόσο το πρόγραμμα επεξεργασίας κειμένου όσο και το παράθυρο προεπισκόπησης. Στο πρόγραμμα επεξεργασίας κειμένου, πρέπει να προσθέσουμε την είσοδο και η έξοδος λαμβάνεται στο παράθυρο προεπισκόπησης. Στο πρόγραμμα επεξεργασίας κειμένου, προσθέτουμε πρώτα την εικόνα στο Markdown τοποθετώντας το '!' σύμβολο και μετά προσθέτουμε αγκύλες στις οποίες προσθέτουμε 'Alt text'. Τώρα, προσθέτουμε τη διαδρομή της εικόνας.

Εισάγουμε το όνομα της εικόνας με την επέκτασή της γιατί τόσο ο κώδικας όσο και η εικόνα αποθηκεύονται στον ίδιο κατάλογο. Έτσι, προσθέτουμε απλώς το όνομα εδώ που είναι 'cloud.png'. Στη συνέχεια, προσθέτουμε το κείμενο που είναι 'Cloud Image' και αυτό είναι το κείμενο που εμφανίζεται μόνο όταν το ποντίκι τοποθετείται. Τώρα, η εικόνα προστίθεται και μπορούμε επίσης να δούμε αυτήν την εικόνα στο παράθυρο προεπισκόπησης.

Η εικόνα του cloud φαίνεται παρακάτω καθώς έχουμε προσθέσει αυτήν την εικόνα στον κώδικα Markdown που εμφανίζεται παραπάνω.

Παράδειγμα #02:

Τώρα, τροποποιούμε το μέγεθος αυτής της εικόνας χρησιμοποιώντας την ετικέτα ' '. Αρχικά, εισάγουμε το 'src' στο οποίο προστίθεται το όνομα ή η διαδρομή της εικόνας. Μετά από αυτό, τοποθετούμε το 'alt' και προσαρμόζουμε το 'Cloud Image'. Προσαρμόσαμε το 'πλάτος' της εικόνας στο '230'. Το 'ύψος' ρυθμίζεται σε '300'. Προσθέτουμε επίσης τον 'τίτλο' σε αυτήν την ετικέτα ' ' και η τιμή αυτού του 'τίτλου' είναι 'Τίτλος στο σύννεφο'. Τώρα, το μέγεθος της εικόνας έχει τροποποιηθεί. Μπορείτε να δείτε το τροποποιημένο μέγεθος της εικόνας στο παράθυρο προεπισκόπησης.

Το μέγεθος της εικόνας σε αυτό το αποτέλεσμα τροποποιείται και το 'πλάτος' της εικόνας είναι '230' και το 'ύψος' είναι '300'. Αυτό συμβαίνει επειδή έχουμε προσαρμόσει αυτό το πλάτος και το ύψος στον κώδικα Markdown.

Παράδειγμα #03:

Μπορούμε επίσης να τροποποιήσουμε την εικόνα «πλάτος» και «ύψος» βάζοντας τις τιμές τους σε ποσοστά. Αφού προσθέσουμε το όνομα ή τη διαδρομή της εικόνας και ρυθμίσουμε το 'alt' σε 'Cloud Image', έχουμε ορίσει το 'πλάτος' και το 'ύψος' της εικόνας στο '50%'. Στη συνέχεια, προσθέστε τον 'τίτλο' και κλείστε αυτήν την ετικέτα.

Εδώ είναι η εικόνα της οποίας το μέγεθος τροποποιείται χρησιμοποιώντας την ετικέτα ' '. Το ύψος της εικόνας, καθώς και το πλάτος, είναι '50%'.

Παράδειγμα #04:

Τώρα, χρησιμοποιούμε το χαρακτηριστικό 'style' σε αυτήν την ετικέτα ' ' για την τροποποίηση του μεγέθους της εικόνας στο Markdown. Πρέπει να προσθέσουμε το όνομα της εικόνας και μετά το χαρακτηριστικό 'alt'. Μετά από αυτό, βάλαμε το χαρακτηριστικό 'style' και προσθέσαμε 'width and height' ως τιμές του. Το 'πλάτος' που ορίσαμε είναι σε pixel που είναι '500px' και το 'ύψος' είναι '400px'. Τώρα, το μέγεθος της εικόνας θα προσαρμοστεί ανάλογα.

Το μέγεθος της εικόνας σε αυτό το αποτέλεσμα έχει ενημερωθεί. Το 'πλάτος' του είναι τώρα '500px' και το 'ύψος' του είναι '400px'. Αυτό είναι ορατό ως αποτέλεσμα του κώδικα Markdown που δίνεται παραπάνω όπου έχουμε προσαρμόσει το πλάτος και το ύψος στο χαρακτηριστικό στυλ.

Παράδειγμα #05:

Προσθέτουμε άλλη μια εικόνα. Αλλά σε αυτόν τον κώδικα Markdown, δεν αλλάζουμε το μέγεθος της εικόνας. Το μέγεθος της εικόνας αλλάζει μόνο όταν έχουμε χρησιμοποιήσει την ετικέτα « ». Βάζουμε το '!' και στη συνέχεια προσθέστε το κείμενο μέσα στις αγκύλες που είναι 'Sun Image'. Αφού κλείσουμε τις αγκύλες, τοποθετούμε τις παρενθέσεις στις οποίες έχουμε εισαγάγει το όνομα της εικόνας “New_sun.png” και στη συνέχεια προσθέτουμε το κείμενο που θα εμφανιστεί στο ποντίκι. Το αρχικό μέγεθος της εικόνας θα εμφανιστεί στο αποτέλεσμα.

Η εικόνα του ήλιου εμφανίζεται όπως έχουμε προσθέσει αυτήν την εικόνα στον κώδικα Markdown. Επίσης, το αρχικό μέγεθος της εικόνας είναι ορατό επειδή δεν μπορούμε να προσαρμόσουμε το μέγεθος της εικόνας χωρίς να χρησιμοποιήσουμε την ετικέτα ' '.

Παράδειγμα #06:

Χρησιμοποιώντας την ετικέτα ' ', αλλάζουμε τώρα το μέγεθος αυτής της εικόνας. Αρχικά, προσθέτουμε το όνομα ή τη διαδρομή της εικόνας της οποίας το μέγεθος θέλουμε να τροποποιήσουμε στο πεδίο 'src'. Το 'πλάτος' και το 'ύψος' της εικόνας έχουν αλλάξει σε '300'. Το μέγεθος της εικόνας έχει πλέον αλλάξει. Το παράθυρο προεπισκόπησης δείχνει το νέο μέγεθος της εικόνας.

Το πλάτος και το ύψος της εικόνας έχουν τροποποιηθεί σε '300'.

Παράδειγμα #07:

Ορίζοντας τις τιμές 'πλάτους' και 'ύψους' της εικόνας σε ποσοστά, μπορούμε εύκολα να αλλάξουμε αυτές τις διαστάσεις. Προσαρμόσαμε και οι δύο το 'πλάτος' και το 'ύψος' της εικόνας στο '40%' και μετά κλείσαμε αυτήν την ετικέτα.

Εδώ είναι η εικόνα με 40% ύψος και επίσης 40% στο πλάτος της. Προσθέσαμε αυτό το πλάτος και το ύψος μέσα στην ετικέτα « » αφού προσθέσουμε το όνομα της εικόνας.

Παράδειγμα #08:

Τώρα, χρησιμοποιούμε το χαρακτηριστικό 'style' στην ετικέτα ' ' για να αλλάξουμε το μέγεθος της εικόνας στο Markdown. Προσθέσαμε το 'width and height' ως τιμές στο χαρακτηριστικό 'style' αφού προσθέσαμε το όνομα της εικόνας και το χαρακτηριστικό 'alt'. Το 'πλάτος' που καθορίζουμε είναι '450px', ενώ το 'ύψος' προσαρμόζεται επίσης σε '450px'. Το μέγεθος της εικόνας θα αλλάξει πλέον κατάλληλα σύμφωνα με αυτές τις νέες τιμές πλάτους και ύψους.

Τώρα, το αποτέλεσμα αυτού του κώδικα εμφανίζεται επίσης στο παράθυρο προεπισκόπησης που εμφανίζεται παρακάτω. Τόσο το πλάτος όσο και το ύψος αυτής της εικόνας είναι τώρα '450 px' σε αυτό το αποτέλεσμα παρακάτω.

Συμπέρασμα:

Εξερευνήσαμε την έννοια της προσθήκης εικόνων λεπτομερώς σε αυτόν τον οδηγό και έχουμε επίσης εξερευνήσει πώς να τροποποιήσουμε το μέγεθος της εικόνας στο Markdown επίσης. Προσθέσαμε τις εικόνες στο Markdown και τροποποιήσαμε το μέγεθός τους με τη βοήθεια της ετικέτας « » και δείξαμε πώς να τα κάνουμε όλα αυτά στο Markdown. Έχουμε αλλάξει το μέγεθος της εικόνας βάζοντας τις τιμές του πλάτους και του ύψους σε αριθμούς καθώς και σε ποσοστά. Έχουμε επίσης χρησιμοποιήσει το χαρακτηριστικό style στην ετικέτα « » για ενημέρωση ή τροποποίηση του μεγέθους της εικόνας στο Markdown.