HTML <img> width atributo

HTML <img> ស្លាក

Pagsasakop at paggamit

width ang atributo ay nagtatalaga ng lapad ng imahe, sa mga paksiyon ng pixel.

Tip:Tukuyin ang height at width ang atributo ay isang mabuting adikto. Kung naitala ang mga atributo na ito, puwedeng mag-assign ng espasyo para sa imahe kapag naglalaad ang pahina. Kung wala ang mga atributo na ito, hindi alam ng browser ang laki ng imahe, kaya hindi ma-reserve ang magandang espasyo, kaya ang lay-out ng pahina ay magbabago kapag naglalaad ang imahe. (Ang susunod na mga pahina ay nagpapaliwanag sa ganitong pananaw).

Tip:Huwag gumamit ng height at width ang atributo upang palakihin ang laki ng imahe. Kung sa pamamagitan ng height at width Ang pagbabawas ng laki ng imahe ay dapat na mag-download ng malakas na laki ng imahe (kahit na maliit ang tama ng imahe sa pahina). Ang tamang paraan ay, i-process muna ang laki ng imahe sa software bago ito ilagay sa web page.

Mga mas maraming pagbabasa:Detalye ng height at width attribute

Halimbawa

Isang imahe na may laki ng 600 pixel at 500 pixel:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

Subukan mo lang

Mga katuruan

<img width="pixels">

Halaga ng attribute

Halaga Paglalarawan
pixels Tukuyin ang lapad ng imahe, sa pamamagitan ng sukat ng pixel (halimbawa width="100").

Higit pang mga halimbawa

Pagbabago ng laki ng imahe - Paggawa ng imahe na may puno ng kulay

Mayroon din ang height at width attribute ang isang nakatagong katangian, na kahit na hindi mo kailangang magbigay ng tunay na sukat ng imahe, o kahit na ang dalawang halaga ay mas malaki o mas maliit kaysa sa tunay na sukat. Ang browser ay magpapatunay ng imahe upang umangkop sa sukat ng inihahanda na lugar. Sa pamamagitan ng pamamaraang ito, madaling magawa ang thumbnail ng malaking imahe at ang pagpamalakas ng maliit na imahe. Subalit, dapat mag-ingat: ang browser ay dapat lumagay ng buong file, kahit na anong sukat ang ito ay magpakita sa huli, at kung hindi mananatili ang orihinal na proporsyong lapad at taas, ang imahe ay magiging depektibo.

Ang isa pang teknik na maaring gamitin sa height at width attribute ay ang pagpapanatili sa pagpupunan ng lugar ng pahina, samantalang pagpapabuti ng pagganap ng dokumento. Isipin mo, kung gusto mong maglagay ng isang kulay na horizontal bar sa dokumento. Hindi mo kailangang gumawa ng isang imahe na may buong sukat, sa halip, gumawa ng isang imahe na may sukat na 1 pixel sa lapad at taas, at ipinagkaloob sa kanyang kulay. Pagkatapos, gamitin ang height at width attribute upang ito ay lumaki sa mas malaking sukat.

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

Ito ang epekto ng HTML na ito, ang kulay na bar na ito ay ginawa gamit ang isang imahe na may isang pixel lamang:

Paggamit ng halaga ng porsyento

Ang huling teknik na maaring gamitin sa width attribute ay ang paggamit ng halaga ng porsyento sa halip ng detalyadong sukat ng pixel. Ito ay gagawing magpakita ang browser na magkabit sa proporsyong laki ng window na pinapakita ng browser sa imahe. Kaya, kung gusto mong gumawa ng isang horizontal bar na may laki ng 30 pixel at may laki ng window na katumbas, maaari itong gawin sa pamamagitan ng:

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

Kapag nagbabago ang laki ng window ng dokumento, ang laki ng imahe din ay magbabago:

Tip:Kung ibinigay ang isang halaga ng width sa porsyento at pinagwawalang ang height, ang browser ay mananatili sa proporsyong pagkakabukod ng lebel at taas ng imahe, kahit na ito ay pinakinggan o pinikitin. Ito nangangahulugan na ang proporsyong taas at lebel ng imahe ay hindi magbabago, kaya hindi magiging depektibo ang imahe.

Hilingin mong tingnan ang HTML sa ibaba:

<img src="/i/ct_1px.gif"} width="20%" />

Ginagamit ang percent na halaga ng width attribute ng image na ct_1px.gif upang makakuha ng isang rectangular na image (ito ay dahil ang orihinal na ct_1px.gif ay isang rectangular na may 1px na lapad at taas):


Subukan mo lang

Tip:Ang layunin ng pagbibigay ng mga halimbawa namin ay upang ikaw ay mas madaling maunawaan ang paggamit ng height at width attribute. Kung ikaw ay may pangangailangan para sa malaking purong kulay na block para sa dekorasyon ng pahina, mas mahusay na paraan ay...Gamitin ang CSS upang gumawa ng background color.

Detalye ng height at width attribute

Bakit gamitin ang height at width attribute

Nakakita ka ba ng paglilipat ng nilalaman ng dokumento nang hindi maganap kapag naglalaad ang dokumento? Dahil ang browser ay nagpapatuloy na i-adjust ang layout ng pahina upang ipakita ang bawat nakaladang image, na kinakailangan upang makita ang laki ng image sa pamamagitan ng pagdownload at pagsasalin ng width at height. Pagkatapos, ang browser ay maglagay ng isang kahit anong rectangular na lugar sa display window. Pagkatapos, ang browser ay i-adjust ang layout ng pahina upang ilagay ang image sa display. Ito ay nagtuturo din na ang image ay isang malayang file, na naisaayos nang malayang i-load sa orihinal na file.

Ngunit ito ay hindi ang pinakamahusay na paraan para ipakita ang dokumento, dahil ang browser ay dapat suriin at kalkulahin ang screen space ng bawat image file bago ipakita ang katabi at mga susunod na nilalaman ng dokumento. Ito ay maaring magdulot ng napakalaking pagkaantala sa pagpapakita ng dokumento, na maaring mapagwasak sa pagbabasa ng gumagamit.

Para sa mga gumagawa, isang mas mahusay na paraan upang tukuyin ang laki ng image sa pamamagitan ng height at width attribute ng <img> tag. Sa ganitong paraan, ang browser ay naglalagay ng lugar para sa image bago ito i-download, kaya mabilis na magpakita ng dokumento, at maiwasan ang paggalaw ng nilalaman ng dokumento. Ang dalawang attribute na ito ay dapat na integral na halaga at naisaayos sa piskel bilang unit ng laki ng image. Ang pagkakaroon ng dalawang attribute sa <img> tag ay walang kahalagahan sa pagkakaroon ng pagkakabanggit.

Problema ng height at width attribute

Kahit na ang height at width na attribute ng <img> tag ay makakapag-improvey ng pagganap at makakapagbigay ng ilang maliit na teknik, mayroon pa ring mahirap na negatibong epekto kapag ginagamit sila. Kahit na ang gumagamit ay nagsasara ng pagdownload ng mga image, ang browser ay dapat ipakita ang lugar na pinaghahandaan para sa image sa tinukoy na laki. Habang ito ay nag-iwan sa mga mambabasa ng isang walang kahulugan na icon, na naglalarawan na ito ay ang lugar na nakahanda para sa image. Sa panahong ito, ang pahina ay magiging napakalala, tulad ng walang nakakumpleto, at ang karamihan ng nilalaman ay walang silbi. Kung hindi magamit ang tinukoy na laki, ang browser ay maglalagay lamang ng isang icon ng image sa teksto, kung saan mayroong kahit anong teksto na mababasa sa display.

對於這個問題我們還沒有解決方案，只能強調一點，就是去使用 alt 屬性 和一個描述性文字，這樣讀者至少知道這裡缺少的是什麼東西。我們還是建議您使用這些尺寸屬性，因為我們鼓勵一切能夠改善網絡性能的行為。

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <img> ស្លាក