HTML leidžia naudoti vaizdus tinklalapiuose ir padaryti juos patrauklesnius, taikant skirtingus stilius. Jei reikia pakeisti vaizdo formatą arba vaizdas neatitinka jūsų tinklalapio išdėstymo, galite pakeisti jo dydį. Šiuo tikslu galite naudoti „ plotis “ ir „ aukščio ' ypatybės ' img “ žymą. Šias ypatybes galima lengvai nustatyti CSS pikseliais.

Šiame vadove sužinosite, kaip pakeisti vaizdo dydį HTML formatu.

Prieš pradedant, reikia pridėti vaizdą prie HTML failo, kuriame bus atliekama vaizdo dydžio keitimo operacija.

Kaip įterpti vaizdą į HTML?

Norėdami pridėti vaizdą į HTML, naudokite šią sintaksę:

Aukščiau minėtos sintaksės aprašymas yra aprašytas toliau. „ img “ žyma naudoja du atributus:

• • 'src' naudojamas vaizdo keliui (URL) pateikti.
  • 'viskas' naudojamas alternatyviam tekstui pateikti, jei vaizdas nerodomas.

HTML

Žemiau esantis kodas reiškia du div. Pirmajame skyrelyje savo tinklalapio viršuje, centre, pridėjome antraštę kaip „ Vaizdo dydis HTML “ naudodami žymą

:

< div >
< centras >
< h1 > Paveikslėlio dydis in HTML h1 >
centras >
div >

Antrasis daliklis pridedamas su klase pavadinimu „ konteineris “ ir vaizdui vaizduoti centre panaudojome žymą

. Viduje centre parašykite toliau nurodytą kodą, kad pridėtumėte vaizdą:

< div klasė = 'konteineris' >
< centras >
< img src = 'images/butterfly.jpg' viskas = 'alternatyvus tekstas' >
centras >
div >

Pasirinktas vaizdas su „ 640*437 “ formato santykis atrodys taip:

Kitame skyriuje bus parodytas vaizdo dydžio keitimo būdas.

Kaip pakeisti vaizdo dydį HTML?

Galite tinkinti vaizdo dydį arba pakeisti jo dydį naudodami ' plotis “ ir „ aukščio “ atributus, norėdami nustatyti jo plotį ir aukštį.

Dabar nustatykime pridėto vaizdo pločio reikšmę kaip ' 300 “ ir pažiūrėkite, kaip tai veikia:

< img src = 'images/butterfly.jpg' viskas = 'alternatyvus tekstas' plotis = '300' >

Matyti, kad vaizdo plotis buvo pakeistas ir jo dydis sėkmingai pakeistas:

Be pločio, „ aukščio “ atributas taip pat gali būti naudojamas tam pačiam tikslui. Norėdami pamatyti dydžio skirtumą, nustatykite „ 550 “ pikseliai kaip vaizdo aukštis:

< img src = 'images/butterfly.jpg' viskas = 'alternatyvus tekstas' plotis = '300' aukščio = '550' >

Galite aiškiai pastebėti vaizdo dydžio skirtumą:

Taip pločio ir aukščio atributai naudojami vaizdo dydžiui keisti.

Išvada

HTML, „ aukščio “ ir „ plotis “ atributai naudojami vaizdo dydžiui keisti. Numatytąjį pridėto vaizdo formato santykį galite pakeisti nustatydami šių atributų reikšmes. Dėl to matomas aiškus vaizdo dydžio skirtumas. Šiame tinklaraštyje parodytas būdas naudoti aukščio ir svorio ypatybes vaizdų dydžiui keisti HTML.