div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度
效果：
宽度变窄，高度相应比例变窄
宽度变宽，高度相应比例变宽
高度与宽度无法直接自适应，需要找一个中间的属性相串联。
宽度的自适应是根据viewport的width来调整的。
padding
padding是根据viewport的width来调整的。
padding-top和padding-bottom也是根据viewport的width来跳转的。
那么我们可以通过 padding-bottom属性来间接和width进行自适应。
padding-bottom的值 = (图片高/图片宽)
假设 图片像素为1920*1080，则padding-bottom值 = （1080/1920） = 56.25%
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="backgroundImg"></div></body><style>body{margin: 0;/*去除div和body之间的间隔*/}#backgroundImg{width: 100%;background: url("pc.jpg") no-repeat;/*no-repeat:背景图将不会被重复*/background-size: cover;/*背景图片放大到适合元素容器的尺寸，图片比例不变.背景图像的某些部分可能无法显示在背景定位区域中。*/padding-bottom: 56.24%;/*起到的效果是让宽度与高度关联,具体数值=(图片高/图片宽)*//*图片分辨率为1202*676 约为56.24%*/}</style></html>
