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

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

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. GIS

    def GIS(): global C global FeaWeights for wid in WordDic.keys(): FeaWeights[wid] = {} for classid in ...

  2. struts2的记住账号密码的登录设计

    一个简单的基于struts2的登录功能,实现的额外功能有记住账号密码,登录错误提示.这里写上我在设计时的思路流程,希望大家能给点建设性的意见,帮助我改善设计. 登录功能的制作,首先将jsp界面搭建出来 ...

  3. java签名证书

    import java.io.FileInputStream; import java.security.KeyStore; import java.security.PrivateKey; impo ...

  4. perl /m

    <pre name="code" class="html">[root@backoffice01 ~]# cat a1.pl my $_=" ...

  5. COJN 0487 800301红与黑

    800301红与黑 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 有一间长方形的房子,地上铺了红色.黑色两种颜色的正方形瓷砖. ...

  6. SET NOCOUNT (Transact-SQL)

    阻止在结果集中返回显示受 Transact-SQL 语句或存储过程影响的行计数的消息. 语法 SET NOCOUNT { ON | OFF } 注释  当 SET NOCOUNT 为 ON 时,不返回 ...

  7. 查看Wii的系统版本信息

    Wii的系统版本信息在系统设置界面就能看到: Step1:主界面 > Wii Options Step2:选择右边的Wii Settings Step3:如下图所示,当前主机的系统版本是4.2U ...

  8. Aggregation Models

    这是Coursera上<机器学习技法>的课程笔记. Aggregation models: mix or combine hypotheses for better performance ...

  9. openSource clouds

    学习当前较主流的开源云基础设施管理软件by Ruiy summarize publish; 我擦,有不时候Ruiy干事也就那吊风格,啥事也就那么随口一说,你们太sensitivity,同网络延迟对存储 ...

  10. mysql二进制

    1.     从http://www.mysql.com下载二进制版的Mysql安装包     //这个MYSQL是二进制版的,不用编译 Linux (x86)        5.0.41    59 ...