天津响应式网站建设,qq互联网站备案号,wordpress加表单,wordpress架设教程视频需求点#xff1a;
设计师给了一张超大背景图#xff0c;需要做一个不知道大小广告位#xff0c;要求就是要把图片撑满整个页面#xff0c;而且还得保证自适应。
解决方案一 #xff08;亲测有效#xff09;
HTML代码#xff1a;
div classwrap…需求点
设计师给了一张超大背景图需要做一个不知道大小广告位要求就是要把图片撑满整个页面而且还得保证自适应。
解决方案一 亲测有效
HTML代码
div classwrap/divCSS代码
.wrap{position: relative;padding-bottom: 35%; background-image: url(/static/img/down-bg.0142ed6.png);background-repeat: no-repeat;background-size: 100%;margin: 0 auto;
}其中padding-bottom的值为设计图的宽高比
解决方案二
HTML代码
div classwrap/divCSS代码
/* 先填充div */
.wrap {background-size: 100% auto; background-repeat: no-repeat; background-image: url(../images/aaa.png);
}.wrap:before {content: ; display: block; padding-top: 100%; /* 代表1:1如果是想要5:1就是20%根据图片大小比例那就自己算一下吧*/
}这块实际上做的就是用before占用一块位置把相应的高度撑起来 然后里面就可以放任何东西了当然里面的东西要保持
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height:100%; 同时上一层的position要是relative的这样就可以保证里面的内容刚刚好在背景图片这个区域了
