之前一直搞不懂background-size的几个属性的使用,今天终于有点小明白了,发几个例子出来
简单的来说
- 百分比%:相对于父元素的宽度和高度的百分比大小;
- auto:背景图片保持原来的大小;
- cover:按照原图片的比例,扩展至足够大,使图片完全覆盖整个背景区域(可能造成图片部分不可见,即被裁剪);
- contain:把图片扩展至最大尺寸,以使其宽度和高度完全适应内容区域(可能造成图片失真,不再是原来的比例,被拉伸);
咱们举例说明:
图片是600x300的
1.cover:按照原图片的比例,扩展至足够大使图片完全覆盖整个背景区域
(可能造成图片部分不可见,即被裁剪)
.pic{
width: 1000px;
height: 500px;
background: url(html/images/ct.jpg);
background-size: cover;
}
效果:被拉伸了
如果改成500x500:高度被撑开成500,宽度不够,被裁剪了
2.auto:背景图片保持原来的大小;
.pic{
width: 400px;
height: 400px;
background: url(html/images/ct.jpg) no-repeat;
background-size: 100% auto;
}
效果:宽度变成了400,高度变成200,按比例
如果改成800x800:宽度被撑开成800,宽度撑高成400
3.contain:背景图片保持原来的大小;
.pic{
width: 800px;
height: 500px;
border: 3px solid #000;
background: url(html/images/ct.jpg) no-repeat;
background-size: contain;
}