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

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

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. mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次

    1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...

  2. 一张图看懂片式多层陶瓷电容器（MLCC）

  3. Delphi 缩放图像代码 - 支持PNG透明通道（利用了Windows的windowscodecs.dll）

    要求Delphi2007或者更高版本, 系统要求至少XP-SP2以上 实际上是利用了Windows的windowscodecs.dll这个文件的功能 在VCL里已经封装为TWICImage类 proc ...

  4. 【HDOJ】3732 Ahui Writes Word

    初看01背包,果断TLE.是因为n和C都比较大.但是vi和ci却很小,转化为多重背包. #include <cstdio> #include <cstring> ][]; ]; ...

  5. HBase协处理器

    说明:类似于RDBMS中触发器,允许用户在region服务器上运行自己的代码,在客户端用户不用关心操作具体在哪进行 使用场景:权限控制,回调函数(钩子函数).扫描统计等 主要类:observer和en ...

  6. cryptopp开源库的使用（二）：base64加密

    很多时候我只是优秀工具的使用者,优秀的工具用好了才能发挥作用 最近使用cryptopp的base64对压缩后的zip文件内容进行加密遇到了问题. 首先zip压缩没问题,可是最后得到的base64字符串 ...

  7. mysql查询最近一小时的数据

    date_sub()函数: DATE_SUB(date,INTERVAL expr type) 实例: SELECT NOW(),DATE_SUB(NOW(),INTERVAL HOUR) as th ...

  8. Disposable microfluidic devices: fabrication, function, and application Gina S. Fiorini and Daniel T

    Disposable microfluidic devices: fabrication, function, and application Gina S. Fiorini and Daniel T ...

  9. 【Unity3D自我记录】解决NGUI通过问题触发事件点

    在虚拟现实的游戏开发或当,人们功能操作,人们走一下地面行动.但随后点击界面button什么时候,会不会触发click事件.这是通过点.当然,点击界面button当相同的触发点接地运行操作,样也是点透 ...

  10. HTML5文件加载进度管理

    /** * 文件加载进度管理 */ DownloadUtils = function(options){ options = options || {}; this.init(options); }; ...