CSS背景图撑开盒子高度

Fw恶龙

跨越阿尔卑斯山圣伯纳隘口的拿破仑

原文地址: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%;
}

参考资料:

阅读 6.1k
1 篇内容引用

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

210 声望
13 粉丝
0 条评论

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视。

210 声望
13 粉丝
宣传栏