html图片撑开盒子,css背景图撑开盒子高度

本文原地址

需求：

给定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大小适应背景图片？

设计网页，常见的宽度是多少像素？