本文原地址
需求：
给定1980px*1080px背景图，在网页显示时，图片宽度等于浏览器宽度，高度根据原图比例显示对应高度，假设图片最小宽度设置为1024px，则最小高度为1024/(1980*1080)=576px
问题：
背景图，是作为容器的一个属性存在的，并不是作为容器的内容，除了宽高padding这类以外的属性，其他的一般不能撑开容器，想要用这张图撑开容器的话，在现有知识下只能想到用img标签插入这张图，撑开容器达到模拟背景的目的，当然这么做的话其他元素只能选择浮动或者定位来排版了。
解决：
图片容器宽度是100%(浏览器宽度)，高度是after用padding-bottom:100%撑开的，100%就是直接根据【上级宽度】的数值计算的，所以这样只能撑出个正方形，需要长方形改变padding-bottom：50%这样使用上一级50%的宽度作为高度就行了。在此需求中计算得：1080/1980=56%；但是，此时若要在该容器内放置内容需要绝对定位，否则会把图片高度撑开过多。
代码：
.main {
min-width: 1024px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.main::after {
content: "";
display: block;
/*这里的padding = height / width*/
padding-bottom: 56%;
}
参考资料：
css背景图撑开盒子高度
图片作为div的背景图片，div几乎没有内容，div如何被撑起来并自适应的？
在未设置height和width的DIV中插入背景图片，如何修改代码，使DIV大小适应背景图片？
设计网页，常见的宽度是多少像素？
