CSS 图片样式

一、图片大小

在 CSS 中，图片大小使用 height 和 width 控制，但在实际开发中，需要多大的图片，就用 PS 生成多大的图片，不建议使用一张大图片，然后用 height 和 width 来改变它的大小，因为大图片的体积大，使页面加载速度变慢。

二、图片边框

与元素的边框相同，也是使用 border 属性来设置图片的边框，在实际应用中使用缩写。

三、图片对齐

1、水平对齐

使用 text-align 属性来实现图片水平对齐，取值有：left、center、right（在图片标签的父元素中定义对齐方式）

2、垂直对齐

使用 vertical-align 属性来定义周围的行内元素或文本对于该元素的垂直方式，理解起来比较复杂，来看以下例子：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            img{
                height: 100px;
                width: 100px;
            }
            #img1{
                vertical-align: top;
            }
            #img2{
                vertical-align: middle;
            }
            #img3{
                vertical-align: baseline;
            }
            #img4{
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        顶部对齐<img id="img1" src="img.jpg" alt=""/>顶部对齐 top<hr/>
        中部对齐<img id="img2" src="img.jpg" alt=""/>中部对齐 middle<hr/>
        基线对齐<img id="img3" src="img.jpg" alt=""/>基线对齐 base<hr/>
        底部对齐<img id="img4" src="img.jpg" alt=""/>底部对齐 bottom<hr/>
    </body>
</html>

在浏览器中的效果：

其中，vertical-align 的属性取值如下：

属性值	说明	示例说明
top	顶部对齐	图片与文字的顶部对齐
middle	中部对齐	图片与文字的中部对齐
baseline	基线对齐	图片基线为底部，文字基线为英文字母四线三格写法的第三线的位置，即 a、o、u 此类字母的底部
bottom	底部对齐	图片与文字的底部对齐

四、文字环绕

可以使用 float 属性来实现文字环绕图片的效果，取值可以为 left 和 right，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 300px;
            }
            img{
                height: 100px;
                width: 100px;
            }
            .p_left{
                float: left;
            }
            .p_right{
                float: right;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img.jpg" alt="" class="p_left">
            <p>图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;图片左浮动&nbsp;</p>
        </div>
        <hr/>
        <div>
            <img src="img.jpg" alt="" class="p_right">
            <p>图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;图片右浮动&nbsp;</p>
        </div>
    </body>
</html>

在浏览器中显示如下：

四、如何利用 vertical-align 来实现图片的居中对齐

有如下代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            div{
                width: 300px;
                height: 300px;
                text-align: center;
                vertical-align: middle;
                display: table-cell;
                border: black 1px solid;
            }
            img{
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img.jpg" alt="">
        </div>
    </body>
</html>

可以看到，图片在 div 内垂直居中：

值得思考的点：

为什么要使用 display:table-cell？因为 vertical-align 只对行内元素有效，将其的 display 属性设为 table-cell 实际上是将块元素转化为单元格，既可以设置宽高，也可以使用垂直居中属性；
既然 vertical-align 属性对行内元素有效，那么可以把 div 换成 span 吗？不可以，因为行内元素不可以设置宽高，所以 span 的宽高设置不生效，不会被撑开，想要撑开 span ，就必须将其转化为块元素，而块元素不能使用 vertical-align 属性……
还有其他图片垂直居中的方式吗？有，下次一定。