HTML <img> property na height
paglilinaw at paggamit
height property na nagtutukoy sa taas ng imahe, sa pamamagitan ng pixels.
Mga tagubilin:Palaging magbigay ng height at property na widthKung naseta ang taas at lapad, magiging ikinakalaan ang espasyo ng imahe kapag inilalagay ang pahina. Kung hindi mayroong mga katangian na ito, hindi alam ang laki ng browser ng imahe at hindi makakalaan ng magandang espasyo. Ito ay magiging dahilan para sa pagbabago ng layout ng pahina sa panahon ng pagkakarga (kapag inilalagay ang imahe).
Mga tagubilin:gamit height at width Ang pagpaliitin ng laki ng imahe ay magpilit ang gumagamit na lumagay ng malaking imahe ( kahit na ito ay maliit sa pahina). Upang maiwasan ito, gamitin ang software ng pagproseso ng imahe upang icala ang laki ng imahe bago ito ilagay sa pahina.
Mga nagpapatuloy na pagbabasa:Detalye ng mga attribute ng height at width
Halimbawa
Isang imahe na may taas na 600 pixel at lapad na 500 pixel:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Gramata
<img height="pixels">
Halaga ng attribute
| Halaga | Paglalarawan |
|---|---|
| pixels | Tukuyin ang taas ng imahe, na nasa porsyento ng pixel (halimbawa height="100"). |
Higit pang mga halimbawa
Pagbabago ng laki ng imahe - Paggawa ng Pinalamanang Imaheng
Mayroon ang attribute na height at width ang isang nakatagong katangian, na kung saan ang tao ay hindi kailangang magbigay ng tunay na laki ng imahe, o nangangahulugan na ang dalawang halaga ay maaaring mas malaki o mas maliit kaysa sa tunay na laki. Ang browser ay magpapataas ng imahe ng awtomatiko, upang sumakop sa lugar na inihahanda. Gagawin ito madaling gumawa ng thumbnail para sa malaking imahe, at palakihin ang maliliit na imahe. Subalit, dapat itong paniwalaan: ang browser ay dapat lumagay ng buong file, kahit gaano kakaunti ang laki ng ipapakita nito, at kung hindi pinapanatili ang orihinal na proporsyon ng width at height, ang imahe ay magiging masaktan.
Ang isa pang takda ng paggamit ng attribute na height at width ay ang pagiging madali upang mapunan ang lugar ng pahina, samantalang maayos din ang pagganap ng dokumento. Magpakita sa iyong isip na kung gusto mong maglagay ng isang kahabaan na kulay sa dokumento. Hindi mo kailangang gumawa ng isang imahe na may ganap na laki, sa halip, lumikha ka ng isang imahe na may lapad at taas na 1 pixel at ipinagbigay ng iyong ginagamit na kulay. Pagkatapos, gamitin ang attribute na height at width upang palakihin ito sa mas malaking laki.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
Ito ang epekto ng HTML na ito, ang kulay na bandila ay ginawa gamit ang isang imahe na may isang pixel lamang:
Paggamit ng porsyento
Ang huling takda ng paggamit ng attribute na width ay ang paggamit ng porsyento kaysa sa eksaktong pinakamalaking pixel. Ito ay gagawing skala ang browser ng imahe ayon sa proporsyon ng window ng browser. Kaya kung gusto mong gumawa ng isang kahabaan na kulay ng 30 pixel na may pagkakakilanlan na may parehong lapad sa window ng display, maari itong gawin sa pamamagitan ng paggamit ng porsyento:
<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:
Mga tagubilin:Kung ibinigay ang isang halaga ng width sa porsyento at napag-alala ang height, ang browser ay mananatili sa proporsyon ng width at height ng imahe kahit na ito ay pinakinggan o pinikitna. Ito nangangahulugan na ang proporsyon ng taas at lapad ng imahe ay hindi magbabago, at ang imahe ay hindi magiging masaktan.
Hingi sa ibabaw na HTML:
<img src="/i/ct_1px.gif"} width="20%" />
Ginagamit ang percent na value ng width attribute ng image na ct_1px.gif upang makakuha ng isang rectangular na imahe (ito ay dahil ang orihinal na ct_1px.gif ay isang rectangular na may 1px lapad at taas):
Mga tagubilin:Ang layunin ng pagbibigay ng mga halimbawa na ito ay upang mas mabuti nating maunawaan ang paggamit ng mga attribute ng height at width. Kung ikaw ay kailangan lamang ng malaking purong kulay na bloke para sa pagdekorasyon ng pahina, mas mahusay na paraan ay .Gamitin ang CSS upang gumawa ng kulay ng panglikuran.
Detalye ng mga attribute ng height at width
Bakit gamitin ang mga attribute ng height at width
Mayroon baga kang nakakita ng ilang kakaibang paggalaw ng nilalaman ng dokumento kapag naglulagay ito. Dahil ang browser ay magpapatuloy na iadjust ang layout ng pahina upang ipakita ang bawat lumilagong imahe, ang browser ay magpapadala at magsasalin ng lapad at taas ng imahe upang matukoy ang laki ng imahe, pagkatapos ay mag-iwan ng isang katumbas na may sukat na paranggulo sa windowng pagpapakita. Pagkatapos, ang browser ay iadjust ang layout ng pahina upang ilagay ang imahe sa pahina. Ito ay sinasabi rin na ang imahe ay isang malayang file, na may magkakaibang pagkakarga mula 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 puwang sa skreen ng bawat imahe bago ipakita ang katabi at higit pang nilalaman ng dokumento. Ito ay maaring magdulot ng napakalaking pagkaantala sa pagpapakita ng dokumento, na maaring pagsira sa pagbabasa ng user.
Para sa mga tagapaglikha, isang mas mahusay na paraan ay sa pamamagitan ng pagtatakda ng laki ng imahe gamit ang mga attribute ng height at width ng <img> tag. Sa ganitong paraan, ang browser ay inihahanda ang lugar para sa imahe bago ito idownload, kaya maaaring mapabilis ang pagpapakita ng dokumento at maiwasan ang paggalaw ng nilalaman ng dokumento. Ang dalawang attribute na ito ay dapat maging integer value at ipinapahiwatig ang laki ng imahe sa paksiyon. Ang pagkakaroon ng dalawang attribute sa <img> tag ay hindi mahalaga ang pagkakasunod-sunod.
Problema ng mga attribute ng height at width
Kahit na ang mga attribute ng height at width ng <img> tag ay makakapagpagandahin ang pagganap at makakapagbibigay ng ilang maliliit na kasanayan, mayroon pang ilang nakakahirap na negatibong epekto kapag ginagamit sila. Kahit na inalis ng user ang pag-automatikong pagdownload ng imahe, ang browser ay dapat ipakita ang lugar na inihahanda para sa imahe sa tinukoy na laki. At kadalasan, ibinibigay sa mga mambabasa ay isang walang kahulugan na ikon na nagsasabi na ito ay ang lugar na nakaposisyon ng imahe. Sa panahong ito, ang pahina ay magiging napakalabag, tulad ng walang nakumpleto, at ang karamihan ng nilalaman ay walang silbi. Kung hindi magamit ang tinukoy na laki, ang browser ay magpapalipas lamang ng isang ikon ng imahe sa teksto, kung saan ay mayroong kahit anong teksto na mababasa sa pagpapakita.
สำหรับประเด็นนี้เรายังไม่มีแนวทางแก้ไข แต่เราขอเน้นย้ำว่าคุณควรใช้ alt 属性 และข้อความที่มีความเหมาะสมเพื่อให้ผู้อ่านอย่างน้อยทราบว่ามีอะไรที่ขาดไป แต่เรายังแนะนำให้คุณใช้ขนาดที่กำหนดไว้เพราะเราสนับสนุนการปฏิบัติที่ช่วยปรับปรุงประสิทธิภาพของเครือข่าย
การสนับสนุนเบราเซอร์
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
