在html网页布局中对于图片列表或图片排版时，图片不是固定宽度高度大小，但图片占位是固定宽度高度，这个时候如果使用CSS固定死图片大小（宽度 高度），这个时候如果图片相对于这个位置不是等比例大小，那么这张图片就会变形，让图片变的不清晰，这个时候想让图片不变形又按比例缩放，如何解决？CSS图片缩小不变形，图片自动缩小，图片按比例等比例缩小不变形解决。
解决方法有两种：
第一种，让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。
第二种，使用css max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。
html img图片等比例缩放方法: 在img标签里面只设置宽，不设置高，图片就会等比例缩放。
在HTML中用CSS对图片进行缩放代码实例
<style>
img{
transform:scale(2);
-ms-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
-moz-transform:scale(2);
}
div{
width:150px;height:150px;overflow:hidden;
}
</style>
<div>
<img src="/a/test.jpg"/>
</div>实例
如何插入图像：
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
（更多实例见页面底部）
所有主流浏览器都支持 <img> 标签。
标签定义及使用说明
<img> 标签定义 HTML 页面中的图像。
<img> 标签有两个必需的属性：src 和 alt。
注释：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
提示：通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接。
HTML 4.01 与 HTML5之间的差异
HTML5 中不支持以下属性：align、border、hspace、longdesc、vspace。
在 HTML 4.01 中，以下属性：align、border、hspace、vspace 已废弃。
HTML 与 XHTML 之间的差异
在 HTML 中，<img> 标签没有结束标签。
在 XHTML 中，<img> 标签必须被正确地关闭。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|
| align | top
bottom
middle
left
right | HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。 |
| alt | text | 规定图像的替代文本。 |
| border | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。 |
| crossoriginNew | anonymous
use-credentials | 设置图像的跨域属性 |
| height | pixels | 规定图像的高度。 |
| hspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。 |
| ismap | ismap | 将图像规定为服务器端图像映射。 |
| longdesc | URL | HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。 |
| src | URL | 规定显示图像的 URL。 |
| usemap | #mapname | 将图像定义为客户器端图像映射。 |
| vspace | pixels | HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。 |
| width | pixels | 规定图像的宽度。 |
HTML <img> 标签的 height 和 width 属性
<img> 标签的 height 和 width 属性设置图像的尺寸。
为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。请不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。
HTML <img> 标签的 src 属性
<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。
为了整理文档的存储，创作者通常会把图像文件存放在一个单独的文件夹中，而且通常会将这些目录命名为 "pics" 或者 "images" 之类的名称。在 W3School 在线教程中，我们的工程师把大部分常用的图像都存放到一个名为 "i" 的文件夹中，"i"是 "images" 的缩写，这样做的好处是可以最大程度地简化路径。
HTML <img> 标签的 src 属性语法
<a src="/it-htmltag/_a class=/index.html"inlink" href="/tag/value/index.html" target="_blank">value">
HTML <img> 标签的 src 属性属性值
值 描述
URL
规定图像的 URL。
可能的值：
绝对 URL - 指向其他站点（比如 src="/it-htmltag/_a class=/index.html"inlink" href="/tag/http/index.html" target="_blank">http://www.169it.com/"）
相对 URL - 指向站点内的文件（比如 src="/i/_a class=/index.html"inlink" href="/tag/image/index.html" target="_blank">image.gif"）
<img> 标签支持 HTML 的全局属性。
<img> 标签支持 HTML 的事件属性。
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <img> 标签
