HTML:n avulla voimme käyttää kuvia verkkosivuilla ja tehdä niistä houkuttelevampia soveltamalla erilaisia ​​tyylejä. Jos sinun on muutettava kuvan kuvasuhdetta tai kuva ei sovi verkkosivusi asetteluun, voit muuttaa sen kokoa. Tätä tarkoitusta varten voit käyttää ' leveys ' ja ' korkeus ' kiinteistöjä ' img ' -tunniste. Nämä ominaisuusarvot voidaan asettaa helposti CSS-pikseleinä.

Tässä oppaassa opit tavan muuttaa kuvan kokoa HTML-muodossa.

Ennen kuin aloitat, kuva on lisättävä HTML-tiedostoon, johon kuvan koon muuttaminen suoritetaan.

Kuinka upottaa kuva HTML:ään?

Voit lisätä kuvan HTML-muodossa käyttämällä seuraavaa syntaksia:

Edellä mainitun syntaksin kuvaus on kuvattu alla. ' img ”-tunniste käyttää kahta attribuuttia:

• • 'src' käytetään antamaan kuvan polku (URL).
  • 'kaikki' käytetään vaihtoehtoisen tekstin tarjoamiseen, jos kuvaa ei näytetä.

HTML

Alla oleva koodi edustaa kahta div:tä. Ensimmäisessä div-osassa lisäsimme otsikon verkkosivumme yläreunaan keskelle ' Kuvan koko HTML-muodossa ' käyttämällä

-tunnistetta:

< div >
< keskusta >
< h1 > Kuvan koko sisään HTML h1 >
keskusta >
div >

Toinen div lisätään luokkaan nimeltä ' kontti ” ja kuvaamaan keskellä olevaa kuvaa olemme käyttäneet

-tunnistetta. Kirjoita keskelle alla oleva koodi lisätäksesi kuvan:

< div luokkaa = 'kontti' >
< keskusta >
< img src = 'images/butterfly.jpg' kaikki = 'vaihtoehtoinen teksti' >
keskusta >
div >

Valittu kuva, jossa on ' 640*437 ” kuvasuhde näyttää tältä:

Seuraava osa esittelee menetelmän kuvan koon muuttamiseen.

Kuinka muuttaa kuvan kokoa HTML:ssä?

Voit mukauttaa kuvan kokoa tai muuttaa sen kokoa käyttämällä ' leveys ' ja ' korkeus ”-attribuutteja asettaaksesi sen leveyden ja korkeuden.

Asetetaan nyt lisätyn kuvan leveysarvoksi ' 300 ' ja katso kuinka se toimii:

< img src = 'images/butterfly.jpg' kaikki = 'vaihtoehtoinen teksti' leveys = '300' >

Voidaan nähdä, että kuvan leveyttä on muutettu ja sen kokoa on muutettu onnistuneesti:

Leveyden lisäksi ' korkeus ”-attribuuttia voidaan käyttää myös samaan tarkoitukseen. Jos haluat nähdä kokoeron, aseta ' 550 ” pikseliä kuvan korkeudeksi:

< img src = 'images/butterfly.jpg' kaikki = 'vaihtoehtoinen teksti' leveys = '300' korkeus = '550' >

Voit selvästi havaita eron kuvan koossa:

Näin leveys- ja korkeusmääritteitä käytetään kuvan koon muuttamiseen.

Johtopäätös

HTML:ssä ' korkeus ' ja ' leveys ” -attribuutteja käytetään kuvan koon muuttamiseen. Voit muuttaa lisätyn kuvan oletuskuvasuhdetta asettamalla näiden attribuuttien arvot. Seurauksena on selvä ero kuvan koon suhteen. Tämä blogi on osoittanut menetelmän käyttää pituus- ja painoominaisuuksia kuvien koon muuttamiseen HTML:ssä.