Kuvien lisääminen Markdowniin:
Syntaksi on annettu alla.
Kuvakoon muuttaminen Markdownissa:
Kuvan koon muuttamiseen Markdownissa käytämme HTML:n -tunnistetta. Vain tämä tunniste auttaa muokkaamaan kuvan kokoa Markdownissa, ja tämän
-tunnisteen syntaksi on annettu alla.
< img src = 'kuvan nimi' kaikki = '' leveys = 'arvo' korkeus = 'arvo' >
Voimme muuttaa kuvan kokoa asettamalla leveyden ja korkeuden arvot sekä numeroina että prosentteina. Voimme myös käyttää style-attribuuttia tässä ' ' -tunnisteessa kuvan koon muokkaamiseen Markdownissa.
Esimerkki # 01:
Käytämme Visual Studio -koodia Markdown-koodien suorittamiseen. Markdown-koodeja varten meidän on avattava sekä tekstieditori että esikatseluikkuna. Tekstieditorissa meidän on lisättävä syöte ja tulos saadaan esikatseluikkunassa. Tekstieditorissa lisäämme kuvan ensin Markdowniin asettamalla '!' symboli ja lisää sitten hakasulkeet, joihin lisäämme 'Alt text'. Nyt lisäämme kuvan polun.
Annamme kuvan nimen ja sen laajennuksen, koska sekä koodi että kuva tallennetaan samaan hakemistoon. Joten lisäämme vain nimen tähän, joka on 'cloud.png'. Sitten lisäämme tekstin, joka on 'Cloud Image', ja tämä on teksti, joka näkyy vain kun hiiren osoitin viedään. Nyt kuva on lisätty ja voimme nähdä tämän kuvan myös esikatseluikkunassa.
Pilvikuva näkyy alla, koska olemme lisänneet tämän kuvan yllä näkyvään Markdown-koodiin.
Esimerkki # 02:
Nyt muokkaamme tämän kuvan kokoa -tunnisteen avulla. Ensin syötetään 'src', johon kuvan nimi tai polku lisätään. Tämän jälkeen asetamme 'alt' ja säädämme 'Cloud Image'. Säätimme kuvan 'leveydeksi' '230'. 'Korkeus' on säädetty arvoon '300'. Lisäämme myös 'title' tähän '
' -tunnisteeseen ja tämän 'title' arvo on 'Cloud title'. Nyt kuvan kokoa on muutettu. Näet kuvan muokatun koon esikatseluikkunassa.
Tämän tuloksen kuvan kokoa muutetaan ja kuvan 'leveys' on '230' ja 'korkeus' on '300'. Tämä johtuu siitä, että olemme säätäneet tätä leveyttä ja korkeutta Markdown-koodissa.
Esimerkki # 03:
Voimme myös muokata kuvan 'leveyttä' ja 'korkeutta' asettamalla niiden arvot prosentteina. Kun olet lisännyt kuvan nimen tai polun ja säätänyt “alt” arvoksi “Cloud Image”, olemme asettaneet kuvan “leveydeksi” ja “korkeudeksi” “50 %”. Lisää sitten 'otsikko' ja sulje tämä tunniste.
Tässä on kuva, jonka kokoa on muutettu -tunnisteen avulla. Kuvan korkeus ja leveys ovat '50 %'.
Esimerkki # 04:
Käytämme nyt tämän -tunnisteen 'style'-attribuuttia kuvan koon muokkaamiseen Markdownissa. Meidän on lisättävä kuvan nimi ja sitten 'alt'-attribuutti. Tämän jälkeen laitoimme attribuutin 'style' ja lisäsimme sen arvoiksi 'leveys ja korkeus'. Asettamamme 'leveys' on pikseleinä, joka on '500px' ja 'korkeus' on '400px'. Nyt kuvan koko mukautuu vastaavasti.
Tämän tuloksen kuvan koko on päivitetty; sen 'leveys' on nyt '500px' ja sen 'korkeus' on '400px'. Tämä näkyy yllä olevan Markdown-koodin seurauksena, jossa olemme säätäneet style-attribuutin leveyttä ja korkeutta.
Esimerkki # 05:
Lisäämme toisen kuvan. Mutta tässä Markdown-koodissa emme muuta kuvan kokoa. Kuvan kokoa muutetaan vain, kun olemme käyttäneet ' ' -tunnistetta. Laitamme '!' ja lisää sitten hakasulkeisiin teksti, joka on 'Aurinkokuva'. Kun olet sulkenut hakasulkeet, asetamme sulut, joihin olemme lisänneet kuvan nimen 'New_sun.png', ja lisäämme sitten tekstin, joka näkyy hiiren osoitin. Kuvan alkuperäinen koko näkyy lopputuloksessa.
Auringon kuva näytetään, kun olemme lisänneet tämän kuvan Markdown-koodiin. Myös kuvan alkuperäinen koko näkyy, koska emme voi säätää kuvan kokoa ilman -tunnistetta.
Esimerkki # 06:
Käyttämällä -tunnistetta, muutamme nyt tämän kuvan kokoa. Ensin lisäämme 'src'-kenttään kuvan nimen tai polun, jonka kokoa haluamme muuttaa. Kuvan 'leveys' ja 'korkeus' on molemmat muutettu arvoon '300'. Kuvan koko on nyt muuttunut. Esikatseluikkuna näyttää kuvan uuden koon.
Kuvan leveys ja korkeus on muutettu arvoon '300'.
Esimerkki # 07:
Asettamalla kuvan 'leveys' ja 'korkeus' arvot prosentteina, voimme helposti muuttaa näitä mittoja. Säätimme molemmat kuvan 'leveyden' ja 'korkeuden' arvoon '40%' ja sulkimme tämän tunnisteen.
Tässä on kuva, jonka korkeus on 40 % ja leveys 40 %. Olemme lisänneet tämän leveyden ja korkeuden -tunnisteen sisään kuvan nimen lisäämisen jälkeen.
Esimerkki # 08:
Nyt käytämme 'style' -attribuuttia ' ' -tunnisteessa muuttaaksesi kuvan kokoa Markdownissa. Lisäsimme 'leveys ja korkeus' arvoiksi 'style'-attribuutille kuvan nimen ja alt-attribuutin lisäämisen jälkeen. Määrittämämme 'leveys' on '450px', kun taas 'korkeus' on myös säädetty arvoon '450px'. Kuvan koko muuttuu nyt sopivasti näiden uusien leveys- ja korkeusarvojen mukaan.
Nyt tämän koodin tulos näkyy myös esikatseluikkunassa, joka näkyy alla. Tämän kuvan sekä leveys että korkeus ovat nyt '450px' tässä alla olevassa tuloksessa.
Johtopäätös:
Olemme tutkineet kuvien lisäämisen käsitettä yksityiskohtaisesti tässä oppaassa ja olemme myös tutkineet, kuinka kuvan kokoa voidaan muuttaa myös Markdownissa. Olemme lisänneet kuvat Markdowniin ja muuttaneet niiden kokoa -tunnisteen avulla ja näyttäneet kuinka tämä kaikki tehdään Markdownissa. Olemme muuttaneet kuvan kokoa asettamalla leveyden ja korkeuden arvot sekä numeroina että prosentteina. Olemme myös käyttäneet
-tunnisteen style-attribuuttia kuvan koon päivittämiseen tai muokkaamiseen Markdownissa.