Binibigyang-daan kami ng HTML na gumamit ng mga larawan sa mga web page at gawing mas kaakit-akit ang mga ito sa pamamagitan ng paglalapat ng iba't ibang istilo. Kung kailangan mong baguhin ang aspect ratio ng larawan o hindi umaangkop ang iyong larawan sa layout ng iyong web page, maaari mo itong baguhin ang laki. Para sa layuning ito, maaari mong gamitin ang ' lapad 'at' taas 'mga katangian sa ' img ” tag. Ang mga value ng property na ito ay madaling maitakda sa mga pixel ng CSS.

Sa manwal na ito, matututunan mo ang paraan upang baguhin ang laki ng imahe sa HTML.

Bago magsimula, kinakailangang idagdag ang imahe sa HTML file kung saan isasagawa ang pagpapalit ng laki ng imahe.

Paano Mag-embed ng isang Larawan sa HTML?

Upang magdagdag ng larawan sa HTML, gamitin ang sumusunod na syntax:

Ang paglalarawan ng nabanggit na syntax sa itaas ay inilarawan sa ibaba. Ang ' img 'Ang tag ay gumagamit ng dalawang katangian:

• • 'src' ay ginagamit upang magbigay ng landas (URL) ng larawan.
  • 'lahat' ay ginagamit upang magbigay ng alternatibong teksto kung ang imahe ay hindi ipinapakita.

HTML

Ang code sa ibaba ay kumakatawan sa dalawang div. Sa unang div, nagdagdag kami ng heading sa tuktok na gitna ng aming web page bilang ' Laki ng Larawan sa HTML ” sa pamamagitan ng paggamit ng

tag:

< div >
< gitna >
< h1 > Laki ng Larawan sa HTML h1 >
gitna >
div >

Ang pangalawang div ay idinagdag sa klase na pinangalanang ' lalagyan ” at para kumatawan sa larawan sa gitna, ginamit namin ang tag na

. Sa loob ng gitna, isulat ang nabanggit na code sa ibaba upang magdagdag ng larawan:

< div klase = 'lalagyan' >
< gitna >
< img src = 'images/butterfly.jpg' lahat = 'kahaliling-teksto' >
gitna >
div >

Ang napiling larawan na may ' 640*437 ” aspect ratio ay magiging ganito:

Ang susunod na seksyon ay magpapakita ng paraan upang baguhin ang laki ng isang imahe.

Paano Baguhin ang Laki ng Imahe sa HTML?

Maaari mong i-customize ang laki ng larawan o i-resize ito sa pamamagitan ng paggamit ng “ lapad 'at' taas ” attribute upang itakda ang lapad at taas nito.

Ngayon, itakda natin ang lapad na halaga ng idinagdag na larawan bilang ' 300 ” at tingnan kung paano ito gumagana:

< img src = 'images/butterfly.jpg' lahat = 'kahaliling-teksto' lapad = '300' >

Makikita na ang lapad ng imahe ay nabago, at matagumpay itong nabago ang laki:

Bilang karagdagan sa lapad, ang ' taas ” attribute ay maaari ding gamitin para sa parehong layunin. Upang tingnan ang pagkakaiba ng laki, itakda ang ' 550 ” pixels bilang taas ng imahe:

< img src = 'images/butterfly.jpg' lahat = 'kahaliling-teksto' lapad = '300' taas = '550' >

Malinaw mong makikita ang pagkakaiba sa laki ng larawan:

Ganyan ginagamit ang mga attribute ng lapad at taas para i-resize ang larawan.

Konklusyon

Sa HTML, ang ' taas 'at' lapad 'Ang mga katangian ay ginagamit para sa pagbabago ng laki ng imahe. Maaari mong baguhin ang default na aspect ratio ng idinagdag na larawan sa pamamagitan ng pagtatakda ng mga halaga ng mga katangiang ito. Bilang resulta, ang isang malinaw na pagkakaiba ay makikita sa laki ng imahe. Ipinakita ng blog na ito ang paraan ng paggamit ng mga katangian ng taas at timbang para sa pagbabago ng laki ng mga larawan sa HTML.