background相关常用属性，图片常用放置方式

问题：一个图的放置方式有三种

//例如：图片在类为imgBox的框中
<div class="imgBox"></div>

1、根据div大小，直接铺满

<div class="imgBox">
<img src="http://edit.2or3m.com/subject/php/20171225/0/8mMTBfcBrH.jpg"/>
</div>

img{
width:100%;
height:100%;
}

常见的问题就是，图片和div框的尺寸比例不同，图片容易变形，如图：



2、对div做背景图设置，图片展示完整

.imgBox{
background-image:url(http://edit.2or3m.com/subject/php/20171225/0/8mMTBfcBrH.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}

如果横向宽较大，则上下有空白，图上下居中；如果高度较大，则左右有空白，横向居中；如图：



background-size: contain; 保持图片本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域，会有白边

3、对div做背景图设置，图片裁切，居中占满盒子

.imgBox{
background-image:url(http://edit.2or3m.com/subject/php/20171225/0/8mMTBfcBrH.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

如果横向宽较大，左右裁切，图左右居中，上下完全展示；如果高度较大，则上下裁切，图居中显示；如图：



background-size: cover; 保持图片本身的宽高比例，将图片裁剪到正好完全覆盖定义背景的区域。

补充

1、在运用background属性的时候，一定要注意位置

2、background-image、background-repeat、 background-position: center center、background-size必须在background 之后设置，否则会被background的默认值覆盖

3、分开写会减少出错的机率