css 背景图片跟div处理

设置背景图片适应div大小

背景图片自适应div，两种设置方法：
1、种是设置background-size:cover
2、设置背景图片no-repeat，background-size:100%; 

其他设置属性
/*background-position: center;*/
/*background-size:cover;*/
/*-webkit-background-size:cover;*/
/*-o-background-size:cover;*/

 

设置div大小适应背景图片大小

给背景图片DIV样式添加一个和背景图片高宽比例相同的padding-bottom值即可。

padding_bottom值就是图片的 height / width 的值

比如背景图片大小为1903x650，高宽比为34.156%，同时还可以用媒体选择器来更换不同大小的图片及更换高宽比例。

<style>
.BackPhoto {
	background-image: url(xxx_1903x650.jpg);
	background-size:cover;
	padding-bottom: 34.156%;
}
@media (max-width: 768px) {
.TopPhoto {
 background-image: url(xxx_768x303.jpg);
 padding-bottom: 39.45%;
}
}
</style>
<div calss="BackPhoto"></div>