需求:

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

设计网页,常见的宽度是多少像素?

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注