图片做背景撑开div

需求点：

设计师给了一张超大背景图，需要做一个不知道大小广告位，要求就是要把图片撑满整个页面，而且还得保证自适应。

解决方案一（亲测有效）

HTML代码：

<div class="wrap"></div>

CSS代码：

.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 class="wrap"></div>

CSS代码：

/* 先填充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的，这样就可以保证，里面的内容刚刚好在背景图片这个区域了

图片做背景撑开div相关推荐

html中的高和宽背景色怎么写,css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
python交互界面用图片当背景_wxPython实现窗口用图片做背景
本文实例为大家分享了wxPython实现窗口用图片做背景的具体代码,供大家参考,具体内容如下效果图: 实现代码: #!/usr/bin/env python # -*- encoding:utf-8 ...
小程序、h5图片铺满div，自适应容器大小
图片铺满div,自适应容器大小,不会拉伸变形小程序 mode属性 scaleToFill:缩放模式,不保持纵横比,图片拉伸至填满 image 元素 aspectFit: 缩放模式,保持纵横比,保证图 ...
[css] 为什么说不提倡用1px的小尺寸图片做背景平铺？
[css] 为什么说不提倡用1px的小尺寸图片做背景平铺? 因为明明可以用background-color就能搞定的事情为什么要用图片? 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
html图片高度撑开,CSS背景图撑开盒子高度
需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*1080)=57 ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
桌面背单词，单词图片做背景
呵呵,时隔多年回复一下评论,是Python的pil库用法示例 #桌面背单词,单词图片做背景from PIL import Image,ImageFont,ImageDraw a = ['reed[[[ ...
关于如何解决img标签中图片超出盒子div范围的讨论
关于如何解决img标签中图片超出盒子div范围的讨论 1.img标签必要属性有两个src,alt <img src="url" alt="text"&g ...

图片做背景撑开div

需求点：

解决方案一（亲测有效）

解决方案二

图片做背景撑开div相关推荐

最新文章

热门文章

图片做背景撑开div

需求点：

解决方案一 （亲测有效）

解决方案二

图片做背景撑开div相关推荐

最新文章

热门文章

解决方案一（亲测有效）