3.2 设置图像属性

3.2.1 图像大小与边框

在网页中直接插入图像时，图像的大小和原图是相同的，而在实际应用时可以通过各种图像属性的设置调整图像的大小、分辨率等。

1.调整图像大小

在＜img＞标签中，通过height和width属性可以设置图像的高度和宽度。其语法格式如下：

● height：用于设置图像的高度，单位是像素，可以省略。

● width：用于设置图像的宽度，单位是像素，可以省略。

说明：在设置图像大小时，如果只设置了高度或宽度，则另一个参数会按照相同比例进行调整。如果同时设置了两个属性，且缩放比例不同，那么图像很可能会变形。

2.设置图像边框——border

在默认情况下，页面中插入的图像是没有边框的，但是可以通过 border 属性为图像添加边框。其语法格式如下：

其中，border用于设置图像边框的大小，单位是像素。

下面列举一个实例。在商品详情页面中添加两张手机图片，其中一张设置宽、高均为350像素，另一张设置宽、高均为50像素，并为其添加边框，具体代码如下（实例位置：资源包\MR\源码\03\02）：

编辑完代码后，在浏览器中运行，显示页面效果如图3.2所示。

说明：在实例中运用了＜div＞标签，＜div＞标签是HTML中一种常用的块级元素，使用它可以在CSS中方便地设置其宽高及内外边距等样式。另外，本实例还运用CSS给页面添加背景图片、设置页面内容居中。关于CSS的具体知识在第10章中会有所讲述。本实例的具体CSS代码请参照资源包中的源码。

3.2.2 图像间距与对齐方式

HTML5中不仅有用于添加图像的标签，而且还可以调整图像在页面中的间距和对齐方式，从而改变图像的位置。

1.调整图像间距

如果不使用＜br＞或＜p＞标签进行换行显示，那么添加的图像会紧跟在文字之后。但是，通过hspace和vspace属性可以调整图像与文字之间的距离，使文字和图像的排版不那么拥挤，看上去更加协调。其语法格式如下：

● hspace：用于设置图像的水平间距，单位是像素，可以省略。

● vspace：用于设置图像的垂直间距，单位是像素，可以省略。

2.设置图像相对于文字基准线的对齐方式

图像和文字之间的排列通过align属性来调整。其对齐方式可以分为两类，即绝对对齐方式和相对文字对齐方式。其中，绝对对齐方式包括左对齐、右对齐和居中对齐3种；而相对文字对齐方式则是指图像与一行文字的相对位置。其语法格式如下：

在该语法中，align的取值如表3.1所示。

下面列举一个实例，在头像选择页面中插入两行供选择的头像图片，并且设置图像与同行文字的中部对齐。代码如下（实例位置：资源包\MR\源码\03\03）：

编辑完代码后，在浏览器中运行，显示页面效果如图3.3所示。

3.2.3 提示文字与替换文本

在HTML中，可以通过为图像设置提示文字和替换文本来添加提示信息。其中，提示文字在鼠标指针悬停在图像上时显示；而替换文本在图像无法正常显示时显示，用以告知用户这是一张什么图片。

1.添加图像的提示文字——titIe

通过 title 属性可以为图像设置提示文字。在浏览网页时，如果图像下载完成，则将鼠标指针放在该图像上，鼠标指针旁边会出现提示文字。也就是说，当鼠标指针悬停在图像上时，稍等片刻，可以出现图像的提示文字，用于说明或描述图像。其语法格式如下：

其中，title后面的双引号中的内容为图像的提示文字。

2.添加图像的替换文本——aIt

当图片由于下载或路径的问题无法显示时，可以通过alt属性在图片的位置显示定义的替换文本。其语法格式如下：

其中，alt后面的双引号中的内容为图像的替换文本。

说明：在上面的语法中，提示文字和替换文本的内容可以是中文，也可以是英文。

下面列举一个实例，在五子棋游戏简介页面中，为图片添加提示文字与替换文本。代码如下（实例位置：资源包\MR\源码\03\04）：

编辑完代码后，在浏览器中运行，显示页面效果如图3.4所示。可以看到，左边图片由于图片格式错误，无法正常显示，所以在图片位置显示替换文本“游戏大厅”；而将鼠标指针放置在第二张图片上时，图片上会显示提示文字“欢迎体验五子棋游戏”。