第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点：img图片标签的宽度属性（width）和高度属性（height）

（二）img图片标签的宽度属性（width）和高度属性（height）

    归纳起来讲，img图片标签的宽度属性（width）和高度属性（height）在指定值时，会有四种情况。
1.通常情况下填写的是：图片的实际宽度和高度（单位默认为像素）
    如（图2-41），在资源管理器中点中某张图片后，可以看到资源管理器最下方有图片的属性信息，其中的尺寸即是图片的实际宽度和高度，单位是像素。也可以在图片所在文件夹，右击图片，在弹出的菜单中选择“属性”，再点击“详细信息”标签查看图片的尺寸信息。
    （图2-41）中的图片按实际尺寸填写宽度和高度的代码为：

（图2-41）

2.第二种情况：不填写宽度和高度属性（不推荐）
    不填写图片的宽度和高度值，代码直接简单的写为：

    这种方式虽然编写起来快速而方便，但在浏览器加载显示图片时可能会造成页面里的元素抖动或移位，造成很差的用户体验。其原因是：浏览器在遇到img标签时，会根据img标签的src属性值向服务器请求读取图片，在图片读取回来并显示之前，浏览器会在图片所在位置放置一个空白的图片占位符，如果img标签指定了宽和高，则图片占位符的尺寸等于所指定的宽和高，但如果img标签没指定宽和高，则图片占位符默认尺寸为32像素×32像素（不同的浏览器，图片占位符的默认大小不一样），这时候如果图片周围有文字或其它内容，当图片被浏览器从服务器上读取回来并显示的时候，图片占位符就会被替换成图片，占位符的尺寸也会重新被图片的实际尺寸所替换。造成的视觉效果是：图片突然撑开了周围的文字或其它内容。这就是抖动和移位现象。
    所以不推荐在编写img标签时缺省宽度和高度属性。

3.第三种情况：不理会图片的实际宽度和高度，指定统一的宽度和高度值
    有时候为了页面的排版效果，必须让图片列表的每一张图片固定为统一的尺寸，比如产品列表页：

 

效果如下：

（图2-42）

    但这种指定图片的宽度和高度属性为固定尺寸的方式，在图片源图实际尺寸不统一时就会造成一个问题：图片被扭曲或拉伸，导致图片显示效果怪异。其扭曲或拉伸原理如下图：

（图2-43）
    造成扭曲或拉伸的根源在于：图片的宽和高没有同比例缩放。好比孙悟空在变化成小鸟的时候，如果头没有相应的变小，那么就会有一个小鸟身、大鸟头。如果按等比缩放，就不会扭曲或拉伸。
    所以如果指定图片列表中的图片为统一的尺寸，则还需要对列表中的图片进行一定的编辑处理，使源图片的实际尺寸与统一指定的尺寸相符，或等比相符。比如图片的统一尺寸为400×300，那么图片尺寸类似为800×600或1200×900就是等比相符。编辑图片尺寸的软件有很多，简单上手一些的可以选择“光影魔术手”，如果要专业的制图软件可以选择“Photoshop”。关于使用Photoshop对图片进行一些简单的操作，在后面的章节中另行讲解。

4.第四种情况：使用JavaScript客户端脚本代码对图片进行等比缩放
    等比的意思是同等比例，等比缩放即是按同等比例缩小或放大。比如宽度缩小为50%，高度也应当同时缩小成50%；高度如果放大为126%，宽度也应当同时放大成126%。其算法为：图片原始宽度÷图片原始高度=图片新宽度÷图片新高度。等式移项转换后为：
    图片新宽度=图片原始宽度÷图片原始高度×图片新高度
    图片新高度=图片新宽度÷图片原始宽度×图片原始高度
    等比缩放举例：
    原图宽80、高80，高度缩小为40，则图片新宽度=原宽80÷原高80×新高40=40。
    原图宽95、高58，宽度扩大为120，则图片新高度=新宽120÷原宽95×原高58=73。
    JavaScript能够根据图片的原宽和原高、新宽和新高进行计算，并按等比缩放。JavaScript将在后面的章节中讲解，此处先给出参考代码：
 

    上面的JavaScript代码要求图片等比缩放后，宽度和高度都不超出300像素，其等比缩放算法为：计算图片的高度缩放为300像素时，等比缩放后图片的宽度是多少，如果宽度不超出300像素，则缩放正确，执行该缩放方案，通过JavaScript代码即时变更图片的宽度和高度为等比缩放后的宽度和高度；如果计算出的宽度超过300像素，则执行另一个缩放方案：将图片的宽度缩放为300像素，高度等比缩放。原理图解如下：

（图2-44）