Paano Mabawasan Ang Imahe Sa Html

Talaan ng mga Nilalaman:

Paano Mabawasan Ang Imahe Sa Html
Paano Mabawasan Ang Imahe Sa Html

Video: Paano Mabawasan Ang Imahe Sa Html

Video: Paano Mabawasan Ang Imahe Sa Html
Video: Part 9: HTML LINKS - HTML and CSS Tagalog Tutorial | Illustrados 2024, Abril
Anonim

Sa hypertext markup na wika (HTML), isang espesyal na "tag" na utos ang ginagamit upang ipakita ang isang imahe sa isang pahina. Ang tag na ito ay tinukoy bilang img at naglalaman ng isang hanay ng mga variable - "mga katangian". Sa tulong ng mga katangian, maaari mong matukoy ang lahat ng mga aspeto ng pagpapakita ng isang imahe sa isang hypertext na pahina, kasama ang mga sukat nito. Gayunpaman, hindi lamang ito ang paraan upang malutas ang problema - maaari mo ring bawasan ang laki ng imahe gamit ang Cascading Style Sheets (CSS).

Paano mabawasan ang imahe sa html
Paano mabawasan ang imahe sa html

Panuto

Hakbang 1

Ilagay ang mga katangian ng taas at lapad sa tag na responsable para sa pagpapakita ng nais na imahe. Itakda ang una sa patayong laki ng larawan, at ang pangalawa nang pahalang. Itakda ang parehong mga numero sa mga pixel, ngunit hindi na kailangang ipahiwatig ang mga unit - px - dito. Kapag kinakalkula ang mga kinakailangang halaga para sa mga katangiang ito, bigyang pansin ang pagtalima ng mga proporsyon ng pagbawas ng larawan, kung hindi man ay ipapakita ito sa isang baluktot na form. Halimbawa, upang mailagay sa isang pahina ang isang halved na larawan mula sa isang file na tinatawag na SomePic.jpg, ang mga paunang sukat na 500 ng 300 pixel, ang tag ay maaaring gawin sa sumusunod na utos:

Hakbang 2

Maaari mong itakda ang proporsyonal na pagbawas ng mga orihinal na sukat ng imahe sa porsyento. Upang magawa ito, gamitin lamang ang katangiang nasa taas nang hindi tumutukoy sa lapad, at magdagdag ng isang porsyento na pag-sign pagkatapos tukuyin ang laki ng pagtukoy ng numero. Halimbawa, maaari mong makamit ang parehong epekto tulad ng sa halimbawa mula sa nakaraang hakbang sa isang tag na nakasulat sa form na ito:

Hakbang 3

Kung nais mong tukuyin ang laki ng imahe gamit ang paglalarawan ng mga istilo, gamitin ang parehong pangalan ng tag - img - at ang mga katangian - lapad at taas. Sa kasong ito, ang mga yunit ng pagsukat - px, pt o% - dapat palaging tinukoy. Upang maitakda ang paghati ng laki ng ganap na lahat ng mga imahe sa pahina, ilagay ang sumusunod na entry sa block ng paglalarawan ng estilo: img {taas: 50%;} Kung kailangan mong bawasan ang laki ng isang imahe lamang, magdagdag ng isang karagdagang katangian ng id sa tag nito at italaga ito ng isang natatangi para sa mga imahe ng halagang pahinang ito - halimbawa, PicOne: Idagdag ang parehong halaga sa talaan ng istilo, pinaghihiwalay ito ng isang "hash" # mula sa pangalan ng tag. Ang kumpletong paglalarawan ng estilo sa kasong ito ay maaaring ganito ang hitsura: img # OnePic {taas: 50%;}

Inirerekumendang: