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

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

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. 能够兼容ViewPager的ScrollView

    /** * 能够兼容ViewPager的ScrollView * @Description: 解决了ViewPager在ScrollView中的滑动反弹问题 */ public class Scrol ...

  2. 强联通 HDU 1269

    第一道强联通的题目纪念一下! 主要是模版 tarjan算法 #include <iostream> #include <cstdlib> #include <cstdio ...

  3. Win7无法访问NAS或Samba服务器解决之道 转

    Win7无法访问NAS或Samba服务器解决之道 http://www.sina.com.cn  2010年05月12日 01:41  IT168.com [IT168 应用]默认情况下,Window ...

  4. 聚类算法:K均值、凝聚层次聚类和DBSCAN

    聚类分析就仅根据在数据中发现的描述对象及其关系的信息,将数据对象分组(簇).其目标是,组内的对象相互之间是相似的,而不同组中的对象是不同的.组内相似性越大,组间差别越大,聚类就越好. 先介绍下聚类的不 ...

  5. 可伸缩性/可扩展性(Scalable/scalability)

    原文地址:http://www.jdon.com/scalable.html 可伸缩性(可扩展性)是一种对软件系统计算处理能力的设计指标,高可伸缩性代表一种弹性,在系统扩展成长过程中,软件能够保证旺盛 ...

  6. vim 插件

    自动补全插件更换:youcompleteme github:https://github.com/Valloric/YouCompleteMe

  7. bda_百度百科

    bda_百度百科 bda

  8. Spark计算模型-RDD介绍

    在Spark集群背后,有一个非常重要的分布式数据架构,即弹性分布式数据集(Resilient Distributed DataSet,RDD),它是逻辑集中的实体,在集群中的多台集群上进行数据分区.通 ...

  9. windows 编程—— 使用函数笔记

    目录: 创建滚动条 滚动条函数(新老版本) 取得设备内容句柄hdc 设置 hdc 中的属性 画点画线 画填充图形 使用自定义的 画笔 和 画刷 矩形.区域和剪裁 关于GDI映像模式 其他常用的方便计算 ...

  10. javascript 分离全局变量

    当要编写一段javascript模块代码是, 这段代码将要在用在各种javascript程序中(就是各种各样的网页中), 为了让这段代码不与原来的代码起冲突,解决方法就是将代码放在一个函数(funct ...