HTML img布局问题详解

[align=center][size=large]HTML img布局问题详解[/size][/align]
[b]1.1尺寸的设置
1.1.1设置方法[/b]
对于一个img元素，可单独地修改 width或者 height 属性来设置大小，同时图片的比例保持不变。即设置宽度为原来的一半时，图片的高度并不是保持原来的大小，而是相应的变成了原来的一半，从而使得图片仍能够保持原有的比例。
[b]1.1.2设置原理[/b]
img元素属于replaced（被替换的）元素。replaced 元素表示这个元素内容的显示不是由CSS控制的。即，图片的内容不是由CSS定义的，而是通过其 src 属性指向的资源决定的。很多 replaced 元素来都会有自己的固有尺寸（Intrinsic dimension）。当 img 的高度改变后，浏览器会计算出其缩放比例，而当元素的宽度是 auto（即默认值）时，浏览器则以原始宽度 * 缩放比例来作为元素的新宽度。从而使得 img 元素的比例始终保持一致。
[b]1.1.3例外情况[/b]
当img的图片的格式是svg时，是没有固有尺寸的。所以不能采用上述方法设置其尺寸。
[b]1.2图片底部留白问题
1.2.1 CSS vertical-align属性[/b]
1、作用：
定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。
2、实例讲解
HTML代码：
<div class="pic-box">
<img src="pic.jpg">fg
</div>
设置图片vertical-align的对齐效果：如下图：
[b]1.2.2留白原因[/b]
根据CSS vertical-align属性的介绍可知：因为img标签为行内元素，所以导致其默认的垂直对齐方式为-baseline，故而图片的下底边对应了外层div的基线baseline，而baseline并不是外层元素的正真的底部（在未设置font-size为0时），而是高于底部的一条基线，所以，造成留白现象。
[b]1.2.3解决方法[/b]
1、 改变img元素的类型
即：
img{
display:block;
}
2、设置img元素的垂直对齐方式
即：
img{
vertical-align:top;
[color=green]/*或者*/[/color]
vertical-align:bottom;
[color=green]/*具体情况具体分析*/[/color]}
3、设置父级元素字体大小为零，即font-size:0;
4、设置img元素的浮动属性
即：
img{
float:left;
[color=green]/*或者*/[/color]
float:right;
}