Adjon hozzá képeket a Markdown alkalmazásban, és módosítsa a képméretet

Képek hozzáadásához a Markdownban:

A szintaxis alább látható.

A képméret módosításához a Markdown alkalmazásban:

A kép méretének módosításához a Markdownban a HTML „ ” címkéjét használjuk. Csak ez a címke segít a kép méretének módosításában a Markdown alkalmazásban, és az „ ” címke szintaxisa az alábbiakban látható.

A kép méretét úgy tudjuk megváltoztatni, hogy a szélesség és magasság értékét számokban és százalékokban is megadjuk. A stílus attribútumot is használhatjuk ebben az „ ” címkében a kép méretének módosítására a Markdownban.

01. példa:

A Markdown kódok végrehajtásához a Visual Studio kódot használjuk. A Markdown kódokhoz meg kell nyitnunk a szövegszerkesztőt és az előnézeti ablakot is. A szövegszerkesztőben hozzá kell adnunk a bemenetet, és a kimenetet az előnézeti ablakban kapjuk meg. A szövegszerkesztőben először a Markdown-ban adjuk hozzá a képet a „!” szimbólumot, majd adjunk hozzá szögletes zárójelet, amelyben hozzáadjuk az „Alt szöveget”. Most hozzáadjuk a kép elérési útját.

A kép nevét a kiterjesztésével írjuk be, mert a kód és a kép is ugyanabba a könyvtárba van mentve. Tehát csak hozzáadjuk a nevet, ami „cloud.png”. Ezután hozzáadjuk a „Felhőkép” szöveget, és ez az a szöveg, amely csak akkor jelenik meg, amikor az egeret mozgatjuk. Most hozzáadtuk a képet, és ezt a képet is láthatjuk az előnézeti ablakban.

A felhőkép lent látható, mivel ezt a képet hozzáadtuk a fent látható Markdown kódhoz.

02. példa:

Most módosítjuk ennek a képnek a méretét az „ ” címke használatával. Először beírjuk az „src”-et, amelybe a kép nevét vagy elérési útját hozzáadjuk. Ezután helyezzük el az „alt”-t, és állítsuk be a „Cloud Image”-t. A kép „szélességét” „230-ra” állítottuk. A „magasság” értéke „300”. A „title”-t is hozzáadjuk ehhez az „ ” címkéhez, és ennek a „title”-nek az értéke „Cloud title”. Most a kép mérete módosult. A kép módosított méretét az előnézeti ablakban láthatja.

A kép mérete ebben az eredményben módosul, és a kép „szélessége” „230”, a „magassága” pedig „300”. Ennek az az oka, hogy ezt a szélességet és magasságot beállítottuk a Markdown kódban.

03. példa:

A kép „szélességét” és „magasságát” is módosíthatjuk, ha ezek értékét százalékban adjuk meg. Miután hozzáadtuk a kép nevét vagy elérési útját, és az „alt”-t „Cloud Image”-re állítottuk, a kép „szélességét” és „magasságát” „50%-ra” állítottuk. Ezután adja hozzá a „címet”, és zárja be ezt a címkét.

Itt látható az a kép, amelynek mérete az „ ” címke használatával módosult. A kép magassága és szélessége „50%”.

04. példa:

Most a „style” attribútumot használjuk ebben az „ ” címkében a kép méretének módosítására a Markdown alkalmazásban. Hozzá kell adnunk a kép nevét, majd az „alt” attribútumot. Ezt követően a „style” attribútumot adtuk hozzá, és hozzáadtuk a „width and height” értéket. Az általunk beállított „szélesség” pixelben van megadva, ami „500px”, a „magasság” pedig „400px”. Most a kép mérete ennek megfelelően módosul.

Az eredményben szereplő kép mérete frissült; a „szélessége” most „500 képpont”, a „magassága” pedig „400 képpont”. Ez látható a fent megadott Markdown kód eredményeként, ahol a stílus attribútumban beállítottuk a szélességet és a magasságot.

05. példa:

Újabb képet adunk hozzá. De ebben a Markdown kódban nem változtatjuk meg a kép méretét. A kép mérete csak akkor változik, ha az „ ” címkét használjuk. A „!” majd adja hozzá a szögletes zárójelek közé a „Napkép” szöveget. A szögletes zárójelek bezárása után helyezzük el a zárójelet, amelybe beszúrtuk a „New_sun.png” képnevet, majd adjuk hozzá az egérmutatót követően megjelenő szöveget. A kép eredeti mérete megjelenik a végeredményben.

A nap képe úgy jelenik meg, ahogy ezt a képet hozzáadtuk a Markdown kódhoz. A kép eredeti mérete is látható, mert nem tudjuk beállítani a kép méretét az „ ” címke nélkül.

06. példa:

Az „ ” címke használatával most megváltoztatjuk ennek a képnek a méretét. Először az „src” mezőbe adjuk hozzá annak a képnek a nevét vagy elérési útját, amelynek méretét módosítani szeretnénk. A kép „szélessége” és „magassága” egyaránt „300”-ra módosult. A kép mérete megváltozott. Az előnézeti ablak a kép új méretét mutatja.

A kép szélessége és magassága egyaránt „300”-ra módosult.

07. példa:

A kép „szélesség” és „magasság” értékeinek százalékos megadásával könnyen megváltoztathatjuk ezeket a méreteket. Mindketten beállítottuk a kép „szélességét” és „magasságát” „40%-ra”, majd bezártuk ezt a címkét.

Íme a kép 40%-os magasságban és 40%-os szélességben. Ezt a szélességet és magasságot hozzáadtuk az „ ” címkéhez a kép nevének hozzáadása után.

08. példa:

Most a „style” attribútumot használjuk az „ ” címkében, hogy módosítsuk a kép méretét a Markdown alkalmazásban. A „width and height” értéket hozzáadtuk a „style” attribútumhoz, miután hozzáadtuk a kép nevét és az „alt” attribútumot. Az általunk megadott „szélesség” „450 képpont”, míg a „magasság” szintén „450 képpont”. A kép mérete mostantól megfelelően módosul a szélesség és magasság új értékeinek megfelelően.

Most ennek a kódnak az eredménye is megjelenik az előnézeti ablakban, amely alább látható. A kép szélessége és magassága is „450 képpont” az alábbi eredményben.

Következtetés:

Ebben az útmutatóban részletesen megvizsgáltuk a képek hozzáadásának koncepcióját, és azt is megvizsgáltuk, hogyan módosítható a kép mérete a Markdown alkalmazásban. A képeket hozzáadtuk a Markdown-hoz, és az „ ” címke segítségével módosítottuk a méretüket, és megmutattuk, hogyan kell mindezt megtenni a Markdownban. A kép méretét úgy változtattuk meg, hogy a szélesség és magasság értékeket számokban és százalékokban is megadtuk. A stílus attribútumot is felhasználtuk az „ ” címkében a kép méretének frissítésére vagy módosítására a Markdown alkalmazásban.