本指南介绍如何在HTML（超文本标记语言）中设置图片的高度和宽度。
- 宽度属性指定图片的宽度，单位是像素。
- 高度属性指定图片的高度，单位是像素。
- 在HTML 4.01中，可以用像素或包含元素的百分比来定义高度。在HTML5中，只能用像素来定义高度。
步骤
-
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
1
编辑要显示图片的文件。比如，default.html。
-
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
2
在脚本中添加以下内容：
<img src="imagefile.jpg" alt="Image" height="42" width="42"> -
src是图片的文件路径。
-
alt是图片的标记。
-
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
3
将
height和width替换成所需的高度和宽度。比如，height="19" width="20"。
-
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
4
保存文件，然后在任意浏览器中打开，以查看效果。所有主流浏览器都支持宽度属性，比如Google Chrome、Safari、Mozilla Firefox、Opera、Internet Explorer等。
小提示
- 一定要指定图片的高度和宽度。指定后，页面在加载时就可以为图片预留空间。如果没有这些属性，浏览器就不知道图片的大小，也就无法预留空间，从而导致页面布局在加载图片时发生变化。
- 如果缩小大图片的高度和宽度，虽然在页面上看起来很小，但用户仍需要加载原图。为避免这种情况，先用工具缩小图片，然后再放到网页上。