Lisage pilte Markdownis ja muutke pildi suurust

Lisage Pilte Markdownis Ja Muutke Pildi Suurust



„Markdown” on üks märgistuskeeltest, mis pakub erinevaid võimalusi teksti, pealkirjade, lõikude, loendite ja linkide lisamiseks ning samuti saame Markdownis rakendada nendele elementidele vormingut. Samuti saame Markdowni pilte lisada ja seejärel Markdownis lisatud piltide suurust muuta. Markdownis pildi suuruse muutmiseks või muutmiseks peame kasutama märgendit . Selles juhendis näitame teile, kuidas Markdownis pilte lisada ja kuidas Markdownis pildi suurust muuta.

Piltide lisamiseks Markdownis:

Süntaks on toodud allpool.

![alt tekst ](pildi/pildi nime tee koos laiendiga 'Tekst, mis kuvatakse hiirekursori liigutamisel' )

Pildi suuruse muutmiseks Markdownis:

Markdownis pildi suuruse muutmiseks kasutame HTML-i märgendit „ ”. Ainult see silt aitab Markdownis pildi suurust muuta ja selle sildi „ ” süntaks on toodud allpool.







< img src = 'pildi nimi' kõike = '' laius = 'väärtus' kõrgus = 'väärtus' >

Pildi suurust saame muuta, määrates laiuse ja kõrguse väärtused nii numbrites kui ka protsentides. Samuti saame Markdownis pildi suuruse muutmiseks kasutada selle märgendi atribuuti style.



Näide # 01:

Markdowni koodide täitmiseks kasutame Visual Studio koodi. Markdowni koodide jaoks peame avama nii tekstiredaktori kui ka eelvaate akna. Tekstiredaktoris peame lisama sisendi ja väljund saadakse eelvaate aknas. Tekstiredaktoris lisame esmalt pildi Markdowni, asetades '!' sümbol ja seejärel lisage nurksulud, kuhu lisame 'Alt text'. Nüüd lisame pildi tee.



Sisestame pildi nime koos laiendiga, kuna nii kood kui pilt salvestatakse samasse kataloogi. Niisiis, lisame siia lihtsalt nime, mis on 'cloud.png'. Seejärel lisame teksti, mis on 'Cloud Image' ja see on tekst, mis kuvatakse ainult siis, kui kursorit liigutatakse. Nüüd on pilt lisatud ja seda pilti näeme ka eelvaate aknas.





Pilvepilt on näidatud allpool, kuna oleme selle pildi lisanud ülal kuvatavasse Markdowni koodi.



Näide # 02:

Nüüd muudame selle pildi suurust märgendi „ ” abil. Esiteks sisestame 'src', kuhu lisatakse pildi nimi või tee. Pärast seda asetame 'alt' ja kohandame 'Cloud Image'. Reguleerisime pildi “laiuseks” “230”. 'Kõrgus' on reguleeritud väärtusele '300'. Lisame sellesse märgendisse ' ' ka 'title' ja selle 'title' väärtus on 'Cloud title'. Nüüd on pildi suurust muudetud. Pildi muudetud suurust näete eelvaate aknas.

Selle tulemuse pildi suurust muudetakse ja pildi 'laius' on '230' ja 'kõrgus' on '300'. Seda seetõttu, et oleme seda laiust ja kõrgust Markdowni koodis kohandanud.

Näide # 03:

Samuti saame muuta pildi 'laiust' ja 'kõrgust', pannes nende väärtused protsentides. Pärast pildi nime või tee lisamist ja “Alt” määramist “Cloud Image”, oleme seadnud pildi “laiuse” ja “kõrguse” väärtuseks “50%. Seejärel lisage 'pealkiri' ja sulgege see silt.

Siin on pilt, mille suurust on muudetud märgendi abil. Pildi kõrgus ja laius on 50%.

Näide # 04:

Nüüd kasutame selle märgendi atribuuti 'style', et muuta Markdownis pildi suurust. Peame lisama pildi nime ja seejärel atribuudi 'alt'. Pärast seda panime atribuudi 'style' ja lisasime selle väärtusteks 'laius ja kõrgus'. Meie seatud 'laius' on pikslites, mis on '500 pikslit' ja 'kõrgus' on '400 pikslit'. Nüüd kohandatakse pildi suurust vastavalt.

Selle tulemuse pildi suurust on värskendatud; selle 'laius' on nüüd '500px' ja selle 'kõrgus' on '400px'. See on nähtav ülaltoodud Markdowni koodi tulemusena, kus oleme kohandanud stiili atribuudi laiust ja kõrgust.

Näide # 05:

Lisame veel ühe pildi. Kuid selles Markdowni koodis me pildi suurust ei muuda. Pildi suurust muudetakse ainult siis, kui oleme kasutanud märgendit “ ”. Panime '!' ja seejärel lisage nurksulgudesse tekst, milleks on 'Päikese kujutis'. Pärast nurksulgude sulgemist paneme sulud, millesse oleme sisestanud pildi nime “New_sun.png” ja seejärel lisame teksti, mis kuvatakse hiirekursoriga üleviimisel. Pildi algne suurus kuvatakse tulemuses.

Päikese kujutist näidatakse nii, nagu oleme selle pildi Markdowni koodi lisanud. Samuti on nähtav pildi algne suurus, kuna me ei saa pildi suurust reguleerida ilma märgendi „ ” kasutamiseta.

Näide # 06:

Kasutades märgendit „ ”, muudame nüüd selle pildi suurust. Esiteks lisame väljale src selle pildi nime või tee, mille suurust tahame muuta. Pildi „laius” ja „kõrgus” on mõlemad muudetud väärtuseks „300”. Pildi suurus on nüüd muutunud. Eelvaate aken näitab pildi uut suurust.

Kujutise laius ja kõrgus on muudetud väärtusele 300.

Näide # 07:

Määrates pildi 'laiuse' ja 'kõrguse' väärtused protsentides, saame neid mõõtmeid hõlpsasti muuta. Reguleerisime mõlemad pildi 'laiuse' ja 'kõrguse' väärtuseks '40%' ja sulgesime seejärel selle sildi.

Siin on pilt 40% kõrgusega ja ka 40% laiusega. Lisasime selle laiuse ja kõrguse märgendi „ ” sisse pärast pildi nime lisamist.

Näide # 08:

Nüüd kasutame sildis „ ” atribuuti „style”, et muuta pildi suurust Markdownis. Pärast pildi nime ja atribuudi „alt” lisamist lisasime atribuudi „style” väärtusteks „laius ja kõrgus”. Meie määratud 'laius' on '450 pikslit', samas kui 'kõrgus' on samuti kohandatud väärtusele '450 pikslit'. Pildi suurus muutub nüüd vastavalt nendele uutele laiuse ja kõrguse väärtustele.

Nüüd kuvatakse selle koodi tulemus ka eelvaate aknas, mis kuvatakse allpool. Selle pildi laius ja kõrgus on nüüd allolevas tulemuses „450 pikslit”.

Järeldus:

Oleme selles juhendis üksikasjalikult uurinud piltide lisamise kontseptsiooni ja uurinud ka seda, kuidas muuta pildi suurust ka Markdownis. Oleme lisanud pildid Markdowni ja muutnud nende suurust märgendi „ ” abil ning näidanud, kuidas seda kõike Markdownis teha. Oleme muutnud pildi suurust, pannes laiuse ja kõrguse väärtused nii numbritesse kui ka protsentidesse. Samuti oleme Markdownis pildi suuruse värskendamiseks või muutmiseks kasutanud märgendis „ ” atribuuti style.