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

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

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. javascript note

    boolean("false") =====>true Date(1387123200000)不等于new Date(1387123200000) 用Date(1387123 ...

  2. hdu 3400 Line belt

    题意:给你两条线段AB,CD:然后给你在AB,CD上的速度P,Q,在其它部分的速度是R,然后求A到D的最短时间. 思路:用三分枚举从AB线段上离开的点,然后再用三分枚举在CD的上的点找到最优点,求距离 ...

  3. activitie用户手册

    最近公司开发流程,学习流程开发,不停看api学习.这是做软件的额...不停的学习学习!!!天天进步中! 用户手册地址:http://www.mossle.com/docs/activiti/#acti ...

  4. COJ 0985 WZJ的数据结构（负十五）（限定区域不同数）

    传送门:http://oj.cnuschool.org.cn/oj/home/addSolution.htm?problemID=955 试题描述: CHX有一个问题想问问大家.给你一个长度为N的数列 ...

  5. spring framework 4 源码阅读

    前面写了几篇spring 的介绍文章,感觉与主题不是很切合.重新整理下思路,从更容易理解的角度来写下文章. spring 的骨架 spring 的骨架,也是spring 的核心包.主要包含三个内容 1 ...

  6. Hadoop Compression

    文件压缩主要有两方面的好处:一方面节省文件存储空间:另一方面加速网络数据传输或磁盘读写.当处理大规模的数据时这些效果提升更加明显,因此我们需要仔细斟酌压缩在Hadoop环境下的使用.   目前已经存在 ...

  7. Word Break II——LeetCode

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  8. CSU 1111 有三户人家共拥有一座花园，每户人家的太太均需帮忙整理花园。A 太太工作了5 天，B 太太则工作了4 天，才将花园整理完毕。C 太太因为正身怀六甲无法加入她们的行动，所以就打算出90元钱

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/D 解题思路:本题的意思就是三位均出90,然后AB按做 ...

  9. Java学习日记-2.1 运算符

    1. 赋值运算符 赋值运算符是有值的 int i; System.out.println(i = 5); //输出5 正因为赋值运算符有值,所以可以可以连等地赋值 int j,k,l,m,n; j = ...

  10. UVA196-Spreadsheet(拓扑排序）

    Spreadsheet In 1979, Dan Bricklin and Bob Frankston wrote VisiCalc, the first spreadsheet applicatio ...