插入图像
来自CloudWiki
图像元素img
img 元素向网页中嵌入一幅图像。img元素是行内元素。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
支持类型
img种常用的三个图片格式：png、jpg、gif，想要展示色彩丰富的高品质图片，可以使用jpg格式，但是体积较大；一般使用png格式，体积较小且支持保存透明背景；如果需要展示动画图片，可以使用gif图片格式。
图像属性
src路径
- <img src="图像URL" [其它各种可选属性] />
src属性指定图像路径及文件名，文件必须是jpeg、jpg、gif或png格式。 src可以是绝对 URL - 指向其他站点（比如 src="http://www.example.com/"） src也可以是相对 URL - 指向站点内的文件（比如 src="/i/image.gif"）
- 源代码：
<html>
<body>
<p>这张图片来自文件夹i：<img src="/i/ct_netscape.jpg" />
</p>
<p>来自 W3School.com.cn 的图像：<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
</p>
</body>
</html>
- 试一试：W3C实例
相对路径的设置分为以下3种∶
图像文件和html文件位于同一文件夹∶只需输入图像文件的名称即可，如<img src="logo.gif"/>。
图像文件位于html文件的下一级文件夹∶输入文件夹名和文件名，之间用"/" 隔开，如<img src="img/img01/logo.gif"/>。
图像文件位于html文件的上一级文件夹∶在文件名之前加入"../"，如果是上 两级，则需要使用"../.."，以此类推，如<img src="../logo.gif"/>。
alt属性
- alt：alt属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，给用户提供一些提示信息。该属性虽然是标签的必备属性，但是省略该属性并不会发生错误，但是为方便搜索引擎抓取到图片，同时也为使用屏幕阅读器的残疾人提供方便，推荐网页开发人员在引入图像中都使用这个属性。
- 试一试：W3C实例
- 源代码:
<html> <body> <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute2.gif" alt="卡通图片卡哇伊" > 在文本中</p> </body> </html>
图像的宽度和高度
- title：指定当鼠标指向图片时显示的提示信息。
- width：设置图像的宽度；
- height：设置图像的高度；
- 为了保证图片不失真，最好不要同时定义它的宽度和高度
- 试一试:W3C实例
<html> <body> <img src="/i/eg_mouse.jpg" width="50%" height="50%"> <br /> <img src="/i/eg_mouse.jpg" width="100%" height="100%"> <br /> <img src="/i/eg_mouse.jpg" width="20%" > <p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p> </body> </html>
- 为了保证图片不失真，最好不要同时定义它的宽度和高度
往往容器的大小和位置是在页面布局时就已经确定好的，后续一般不会随意改变，建议在上传图片时事先将图片剪切来匹配容器大小，或者在引用图片时调整图片的样式大小为容器的100%，同时对容器使用overflow.∶hidden属性，避免图像占据过多的空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title></title>
<style type="text/css">
.box{ width:100px;
height: 100px;
border: 1px solid;}
</style>
</head>
<body>
<div class="box"><img src="img/h5.jpg" ></div>
</body>
</html>
下一节 图像样式
