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

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

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. Hadoop 学习笔记（一） HDFS API

    http://www.cnblogs.com/liuling/p/2013-6-17-01.html 这个也不错http://www.teamwiki.cn/hadoop/thrift thrift编 ...

  2. Android ContentProvider 简介

    当在系统中部署一个又一个Android应用之后,系统里将会包含多个Android应用,有时候就需要在小同的应用之问芡亭数据,比如现在有一个短信接收应用,用户想把接收到的陌生短信的发信人添加到联系人管理 ...

  3. 7.4.1 Dumping Data in SQL Format with mysqldump

    7.4 Using mysqldump for Backups 使用mysqldump 用于备份: 7.4.1 Dumping Data in SQL Format with mysqldump 7. ...

  4. 【归并排序】【逆序数】HDU 5775 Bubble Sort

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5775 题目大意: 冒泡排序的规则如下,一开始给定1~n的一个排列,求每个数字在排序过程中出现的最远端 ...

  5. delphi 自定义消息

    delphi 自定义消息     消息描述 Tmsg是   Windows系统用来记录描述一个具体的windows消息的.就是windows   用于封装应用程序及系统程序发生的消息,它是操作系统使用 ...

  6. CentOS 6.5 安装realtek RTL8188CE无线网卡

    首先,要检查一下网络适配器的型号. [root@localhost sam]# lspci -nn | grep -i net03:00.0 Ethernet controller [0200]: R ...

  7. 获取git的当前分支名称

    git branch | grep \"*\" | awk -F \"_\" '{print $2}'

  8. [Java] 可运行 jar 记录

    在 Eclipse 上,通过 Export 选择 Java 下的 Runnable JAR file ,可以将项目导出一个可执行的 jar 包. 例子如下 1. Eclipse 项目只有一个文件 ma ...

  9. [Design Pattern] Command Pattern 命令模式

    发现公司的代码好像有用到 Command Pattern,回顾重温下. Command Pattern 的类图结构如下: 参考 <Head First Design Patterns(英文版)& ...

  10. js用for循环为对象添加事件并传递参数

    var objArr = getObjArr(id);   for(var i=0; i<objArr.length; i++){    var param=objArr.param    ad ...