本文原地址
需求:
给定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大小适应背景图片?
设计网页,常见的宽度是多少像素?