在父级容器中设定最大的宽度，由于背景图片会出现塌陷的情况，有宽度无高度，

则，在图片容器中添加以下属性

padding-top:%(计算方式：图片的高度/图片的宽度*100%)

background-size:cover设定背景图片铺满全屏；

由于ie8及以下，不支持background-size:cover的属性；因此需要加上

background-position:center;同时保证图片的最大宽度，为父级容器的宽度；

使用padding-top实现自适应背景图片的更多相关文章

  1. 使用padding代替高度实现背景图片高度按比例自适应

    本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionat ...

  2. CSS实现网页背景图片自适应全屏,自适应背景图片

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  3. Css_Backgroud-position（背景图片）定位问题详解

    background-position的说明:    设置或检索对象的背景图像位置.必须先指定 background-image 属性.该属性定位不受对象的补丁属性( padding )设置影响.   ...

  4. 3.css3中多个背景图片的用法

    (background-clip裁剪,background-position位置,background-origin定位,background-repeat是否重复) <!DOCTYPE htm ...

  5. HTML BODY 背景图片

    内嵌: background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景 ...

  6. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  7. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  8. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  9. 基于html5背景图片自适应代码

    基于html5背景图片自适应代码是一款背景不随滚动条滚动,会根据分辨率不同自动匹配对应的背景图片.效果图如下: 在线预览   源码下载 实现的代码. css代码: .jawbone-hero .jaw ...

随机推荐

  1. Coupons

    uva10288:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&am ...

  2. 自定义xamarin.forms Entry 背景色以及边框

    创建   一个Xamarin.Forms自定义控件.     自定义Entry控件可以通过继承来创建Entry控制,显示在下面的代码示例: public class MyEntry : Entry { ...

  3. (step5.1.2)hdu 2473(Junk-Mail Filter——并查集)

    题目大意:输入两个整数n,m(n表示点的个数,m表示操作数).在接下来的m行中,对点的操作有两种 1)M a b . 表示将a.b并到一个集合中 2)S a .表示将a从原来的集合中去除,而成为一个单 ...

  4. Linux下视频转换工具:转换,切割,连接,

    首先当然是需要安装ffmpeg软件包,可以直接从源中进行安装!但我安装后并不能成功执行后面所需要执行的转换命令,所以我只能重新从源码编译安装ffmpeg: (1)下载ffmpeg源码包,注意版本不能太 ...

  5. POJ2251 Dungeon Master(bfs)

    题目链接. 题目大意: 三维迷宫,搜索从s到e的最小步骤数. 分析: #include <iostream> #include <cstdio> #include <cs ...

  6. CSU 1160 把十进制整数转换为十六进制，格式为0x开头，10~15由大写字母A~F表示

    题目链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/A 解题思路: 将16进制的表示方法列在一个数组里面 ...

  7. D - Constructing Roads - 2421

    题意:有一些村庄需要修一些道路是所有村庄都可以连接,不过有些道路已经修好了,问题最少还需要修建的道路长度是多少. 输入的第一行是一个N代表N个村庄,下面是一个N*N的矩阵,代表着q->j的距离, ...

  8. weblogic Connection has already been closed解决方法

    今天正式环境下的有一个功能报错,看了下weblogic日志,报连接已经关闭. com.ibatis.common.jdbc.exception.NestedSQLException: --- The ...

  9. struts2中修改Action后刷新浏览器后不能及时更新

    在学习strut2的时候,发现如果修改配置文件中Action的时候,刷新浏览器并不能加载修改后的Action,只能关闭服务,重新开启server才能获取到,上网找了许多资料后发现只要在配置文件中加上下 ...

  10. Android控件Editext、TextView属性详解

    EditText属性描述 android:layout_gravity="center_vertical"//设置控件显示的位置:默认top,这里居中显示,还有bottom and ...