HTML img布局问题详解

HTML img布局问题详解

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