CSS背景图撑开盒子高度

原文地址：https://segmentfault.com/a/1190000021436148
作者：Fw恶龙
本文首发于：思否

需求：

给定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大小适应背景图片？
• 设计网页，常见的宽度是多少像素？