CodeW3C အွန်လိုင်း တိုက်
HTML အသုံးပြုခြင်း စာအုပ်
ဘာသာစကား စကားပြော
လက်ရှိ စကားပြော
编程教程
XML 系列教程
建站手册
参考手册
အခန်းချင်း စာရင်း
参考手册
HTML အက္ခရာ အထား အော်ဒါ
HTML အက္ခရာ အထား စာရင်း
HTML ဘာသာစကား ကူးကြမ်း
HTML 全局属性
HTML အခမ်း
HTML 颜色名
HTML လက်ရွေး
HTML ဗွီ/အသံ
HTML 字符集
HTML စာရင်း အမျိုးအစား
HTML URL 编码
HTML စကား ကုဒ်
HTML နိုင်ငံ ကုဒ်
HTTP သတင်း
HTTP စမ်းသုံးစရာ
键盘快捷键
HTML သတ်မှတ်
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
-
</a></li> <li><a href="/my/tags/tag_img.html" title="ဟန်တီလိုင် <img> အမှတ်"><img></a></li> <li><a href="/my/tags/tag_input.html" title="ဟန်တီလိုင် <input> အမှတ်"><input></a></li> <li><a href="/my/tags/tag_ins.html" title="ဟန်တီလိုင် <ins> အမှတ်"><ins></a></li> <li><a href="/my/tags/tag_kbd.html" title="ဟန်တီလိုင် <kbd> အမှတ်"><kbd></a></li> <li><a href="/my/tags/tag_label.html" title="ဟန်တီလိုင် <label> အမှတ်"><label></a></li> <li><a href="/my/tags/tag_legend.html" title="ဟန်တီလိုင် <legend> အမှတ်"><legend></a></li> <li><a href="/my/tags/tag_li.html" title="ဟန်တီလိုင် <li> အမှတ်"><li></a></li> <li><a href="/my/tags/tag_link.html" title="ဟန်တီလိုင် <link> အမှတ်"><link></a></li> <li><a href="/my/tags/tag_main.html" title="ဟန်တီလိုင် <main> အမှတ်"><main></a></li> <li><a href="/my/tags/tag_map.html" title="ဟန်တီလိုင် <map> အမှတ်"><map></a></li> <li><a href="/my/tags/tag_mark.html" title="ဟန်တီလိုင် <mark> အမှတ်"><mark></a></li> <li><a href="/my/tags/tag_menu.html" title="ဟန်တီလိုင် <menu> အမှတ်"><menu></a></li> <li><a href="/my/tags/tag_meta.html" title="ဟန်တီလိုင် <meta> အမှတ်"><meta></a></li> <li><a href="/my/tags/tag_meter.html" title="ဟန်တီလိုင် <meter> အမှတ်"><meter></a></li> <li><a href="/my/tags/tag_nav.html" title="ဟန်တီလိုင် <nav> အမှတ်"><nav></a></li> <li><a href="/my/tags/tag_noframes.html" title="ဟန်တီလိုင် <noframes> အမှတ်"><noframes></a></li> <li><a href="/my/tags/tag_noscript.html" title="ဟန်တီလိုင် <noscript> အမှတ်"><noscript></a></li> <li><a href="/my/tags/tag_object.html" title="ဟန်တီလိုင် <object> အမှတ်"><object></a></li> <li><a href="/my/tags/tag_ol.html" title="ဟန်တီလိုင် <ol> အမှတ်"><ol></a></li> <li><a href="/my/tags/tag_optgroup.html" title="ဟန်တီလိုင် <optgroup> အမှတ်"><optgroup></a></li> <li><a href="/my/tags/tag_option.html" title="ဟန်တီလိုင် <option> အမှတ်"><option></a></li> <li><a href="/my/tags/tag_output.html" title="ဟန်တီလိုင် <output> အမှတ်"><output></a></li> <li><a href="/my/tags/tag_p.html" title="ဟန်တီလိုင် <p> အမှတ်"><p></a></li> <li><a href="/my/tags/tag_param.html" title="ဟန်တီလိုင် <param> အမှတ်"><param></a></li> <li><a href="/my/tags/tag_picture.html" title="ဟန်တီလိုင် <picture> အမှတ်"><picture></a></li> <li><a href="/my/tags/tag_pre.html" title="ဟန်တီလိုင် <pre> အမှတ်"><pre></a></li> <li><a href="/my/tags/tag_progress.html" title="ဟန်တီလိုင် <progress> အမှတ်"><progress></a></li> <li><a href="/my/tags/tag_q.html" title="ဟန်တီလိုင် <q> အမှတ်"><q></a></li> <li><a href="/my/tags/tag_rp.html" title="ဟန်တီလိုင် <rp> အမှတ်"><rp></a></li> <li><a href="/my/tags/tag_rt.html" title="ဟန်တီလိုင် <rt> အမှတ်"><rt></a></li> <li><a href="/my/tags/tag_ruby.html" title="ဟန်တီလိုင် <ruby> အမှတ်"><ruby></a></li> <li><a href="/my/tags/tag_s.html" title="ဟန်တီလိုင် <s> အမှတ်"><s></a></li> <li><a href="/my/tags/tag_samp.html" title="ဟန်တီလိုင် <samp> အမှတ်"><samp></a></li> <li><a href="/my/tags/tag_script.html" title="ဟန်တီလိုင် <script> အမှတ်"><script></a></li> <li><a href="/my/tags/tag_search.html" title="ဟန်တီလိုင် <search> အမှတ်"><search></a></li> <li><a href="/my/tags/tag_section.html" title="ဟန်တီလိုင် <section> အမှတ်"><section></a></li> <li><a href="/my/tags/tag_select.html" title="ဟန်တီလိုင် <select> အမှတ်"><select></a></li> <li><a href="/my/tags/tag_small.html" title="ဟန်တီလိုင် <small> အမှတ်"><small></a></li> <li><a href="/my/tags/tag_source.html" title="ဟန်တီလိုင် <source> အမှတ်"><source></a></li> <li><a href="/my/tags/tag_span.html" title="ဟန်တီလိုင် <span> အမှတ်"><span></a></li> <li><a href="/my/tags/tag_strike.html" title="ဟန်တီလိုင် <strike> အမှတ်"><strike></a></li> <li><a href="/my/tags/tag_strong.html" title="ဟန်တီလိုင် <strong> အမှတ်"><strong></a></li> <li><a href="/my/tags/tag_style.html" title="ဟန်တီလိုင် <style> အမှတ်"><style></a></li> <li><a href="/my/tags/tag_sub.html" title="HTML <sub> ခွဲခြားသုံးစံ"><sub></a></li> <li><a href="/my/tags/tag_summary.html" title="HTML <summary> ခွဲခ�ားသုံးစံ"><summary></a></li> <li><a href="/my/tags/tag_sup.html" title="HTML <sup> ခွဲခ�ားသုံးစံ"><sup></a></li> <li><a href="/my/tags/tag_svg.html" title="HTML <svg> ခွဲခ�ားသုံးစံ"><svg></a></li> <li><a href="/my/tags/tag_table.html" title="HTML <table> ခွဲခ�ားသုံးစံ"><table></a></li> <li><a href="/my/tags/tag_tbody.html" title="HTML <tbody> ခွဲခ�ားသုံးစံ"><tbody></a></li> <li><a href="/my/tags/tag_td.html" title="HTML <td> ခွဲခ�ားသုံးစံ"><td></a></li> <li><a href="/my/tags/tag_template.html" title="HTML <template> ခွဲခ�ားသုံးစံ"><template></a></li> <li><a href="/my/tags/tag_textarea.html" title="HTML <textarea> ခွဲခ�ားသုံးစံ"><textarea></a></li> <li><a href="/my/tags/tag_tfoot.html" title="HTML <tfoot> ခွဲခ�ားသုံးစံ"><tfoot></a></li> <li><a href="/my/tags/tag_th.html" title="HTML <th> ခွဲခ�ားသုံးစံ"><th></a></li> <li><a href="/my/tags/tag_thead.html" title="HTML <thead> ခွဲခ�ားသုံးစံ"><thead></a></li> <li><a href="/my/tags/tag_time.html" title="HTML <time> ခွဲခ�ားသုံးစံ"><time></a></li> <li><a href="/my/tags/tag_title.html" title="HTML <title> ခွဲခ�ားသုံးစံ"><title></a></li> <li><a href="/my/tags/tag_tr.html" title="HTML <tr> ခွဲခ�ားသုံးစံ"><tr></a></li> <li><a href="/my/tags/tag_track.html" title="HTML <track> ခွဲခ�ားသုံးစံ"><track></a></li> <li><a href="/my/tags/tag_tt.html" title="HTML <tt> ခွဲခ�ားသုံးစံ"><tt></a></li> <li><a href="/my/tags/tag_u.html" title="HTML <u> ခွဲခ�ားသုံးစံ"><u></a></li> <li><a href="/my/tags/tag_ul.html" title="HTML <ul> ခွဲခ�ားသုံးစံ"><ul></a></li> <li><a href="/my/tags/tag_var.html" title="HTML <var> ခွဲခ�ားသုံးစံ"><var></a></li> <li><a href="/my/tags/tag_video.html" title="HTML <video> ခွဲခ�ားသုံးစံ"><video></a></li> <li><a href="/my/tags/tag_wbr.html" title="HTML <wbr> ခွဲခ�ားသုံးစံ"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/howto/index.html" title="CodeW3C.com ဘောင်းကြီး">CodeW3C.com ဘောင်းကြီး</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>HTML <img> 标签的 height 和 width 属性</h1> <div class="backtoreference"> <p><a href="/my/tags/tag_img.html">ဟန်တီလိုင် <img> အမှတ်</a></p> </div> <div> <h2>实例</h2> <p>将图像宽度和高度分别设置为 200 像素：</p> <pre class="htmlHigh"><img src="/i/mouse.jpg" <mark>height="200" width="200"</mark> /></pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=eg_html_image_size">亲自试一试</a></p> </div> <div> <h2>定义和用法</h2> <p><img> 标签的 height 和 width 属性设置图像的尺寸。</p> <p class="tip"><span>提示：</span>为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。</p> <p class="tip"><span>提示：</span>请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。</p> <p class="note"><span>延伸阅读：</span><a href="#height-width">详解 height 和 width 属性</a></p> </div> <div> <h2>更多实例</h2> <h3>改变图像大小 - 制作填充图像</h3> <p>height 和 width 属性有一种隐藏的特性，就是人们无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且，如果没有保持其原来的宽度和高度比例，图像会发生扭曲。</p> <p>使用 height 和 width 属性的另外一种技巧，是可以非常容易地实现对页面区域的填充，同时还可以改善文档的性能。设想一下，如果你想在文档中放置一个彩色的横条。您不需要创建一个具有完整尺寸的图像，相反，您只要创建一个宽度和高度都为 1 个像素的图像，并把自己希望使用的颜色赋给它。然后使用 height 和 width 属性把它扩展到更大的尺寸。</p> <pre class="htmlHigh"><img src="/i/ct_1px.gif" <mark>width="200px" height="30px"</mark> /></pre> <p>这是上面这段 HTML 的效果，这个颜色彩条是用只有一个像素的图像制成的：</p> <img src="/i/ct_1px.gif" width="200px" height="30px" /> <h3>使用百分比值</h3> <p>使用 width 属性的最后一个技巧是使用百分比值来代替像素的绝对值。这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像。因此，如果要创建一个宽度与显示窗口宽度相同，高度为 30 个像素的彩色横条，可以这样实现：</p> <pre class="htmlHigh"><img src="/i/ct_1px.gif" <mark>width="60%" height="30px"</mark> /></pre> <p>စာရင်း ပုံမှန် အရွယ် ပြောင်းလဲ သွား ချိန်တွင် အရုပ်ပုံ အရွယ် လည်း ပြောင်းလဲ သွားလိမ့်မယ်：</p> <img src="/i/ct_1px.gif" width="60%" height="30px" /> <p class="tip"><span>提示：</span>အထူးသဖြင့် သုံးပုံ အနေဖြင့် width အတိုင်း တစ် ပုံ ကို သုံးလျှင် height ကို ခွင့်လွှတ် ပြီး အင်္ဂါကြီးခြင်း သို့မဟုတ် အင်္ဂါသွားခြင်း အရ ဘူးသတ်တော်ခဲ့သော ရုပ်ပုံ အရွယ် သည် အရွယ်အစား ပုံစံ ကို ကိုင်တွယ် လိမ့်မယ်။ ဒါဟာ ရုပ်ပုံ အကျယ် နှင့် အရွယ် အစား အုပ်စု သည် ပြောင်းလဲ သွားလိမ့်မယ်ကြောင်း နှင့် ရုပ်ပုံ သည် ပြောင်းလဲ သွားသော အတိုင်း ပြန်လည် ပြောင်းလဲ သွားလိမ့်မယ်။</p> <p>请看下面的 HTML：</p> <pre class="htmlHigh"><img src="/i/ct_1px.gif" <mark>width="20%"</mark> /></pre> <p>也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：</p> <img src="/i/ct_1px.gif" width="20%" /> <p class="tip"><span>提示：</span>您可以在我们的在线测试工具中<a target="_blank" href="/my/tiy/t.html?f=eg_html_image_height-width">亲自试一试</a>！</p> <p class="tip"><span>提示：</span>我们提供以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是<a href="/my/css/css_background.html" title="CSS နောက်ခံ">使用 CSS 来创建背景色</a>。</p> </div> <div> <h2>浏览器支持</h2> <p>所有浏览器均支持 height 和 width 属性。</p> </div> <div> <h2>语法</h2> <pre class="htmlHigh"><img height="<i>value</i>" /></pre> <p>或者：</p> <pre class="htmlHigh"><img width="<i>value</i>" /></pre> <h3>属性值</h3> <table class="dataintable"> <tr> <th>值</th> <th>描述</th> </tr> <tr> <td><i>pixels</i></td> <td>以像素为单位的高度或宽度值。</td> </tr> <tr> <td><i>percent</i></td> <td>以包含元素的百分比计的高度或宽度值。</td> </tr> </table> </div> <div class="example"> <h2>TIY 实例</h2> <dl> <dt><a target="_blank" href="/my/tiy/t.html?f=eg_html_image_size">调整图像尺寸</a></dt> <dd>本例演示如何将图片调整到不同的尺寸。</dd> </dl> </div> <div id="height-width"> <h2>详解 height 和 width 属性</h2> <h3>为什么要使用 height 和 width 属性</h3> <p>您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。</p> <p>但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。</p> <p>对于创作者来说，一种更为有效的方法是通过 <img> 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 <img> 标签中出现的次序并不重要。</p> <h3>height 和 width 属性的问题</h3> <p>虽然 <img> 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。</p> <p>对于这个问题我们还没有解决方案，只能强调一点，就是去使用 <a href="/my/tags/att_img_alt.html" title="HTML <img> ခွဲခ�ားသုံးစံ၏ alt အခွင့်">alt 属性</a>和一些<a href="/my/tags/att_img_longdesc.html" title="HTML <img> ခွဲခ�ားသုံးစံ၏ longdesc အခွင့်">描述性文字</a>，这样读者至少知道这里缺少的是什么东西。我们还是建议您使用这些尺寸属性，因为我们鼓励一切能够改善网络性能的行为。</p> </div> <div class="backtoreference"> <p><a href="/my/tags/tag_img.html">ဟန်တီလိုင် <img> အမှတ်</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/my/tags/index.html">HTML 参考手册</a></h5> <h5 id="tools_example"><a href="/my/html/html_examples.html">HTML 实例</a></h5> <h5 id="tools_quiz"><a href="/my/html/html_quiz.html">HTML 测验</a></h5> <h5 id="tools_tutorial"><a href="/my/html/index.html">HTML 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/my/about/index.html" title="နှင့် CodeW3C.com အကြောင်း">နှင့် CodeW3C.com အကြောင်း</a> <a href="/my/about/about_helping.html" title="နှင့် CodeW3C.com အကူ">နှင့် CodeW3C.com အကူ</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း အကြောင်း">အသုံးပြု အခွင့်</a> <a href="/my/about/about_privacy.html" title="နှင့် လျှို့ဝှက်">လျှို့ဝှက် အခွင့်</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="သတင်းပေးသည် Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>