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

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

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实现倒排索引(二)

    hadoop api http://hadoop.apache.org/docs/r1.0.4/api/org/apache/hadoop/mapreduce/Reducer.html 改变一下需求: ...

  2. SCALA中的函数式编程

    演示了值函数,匿名函数,闭包... 其它具体的应用,还得在生产当中吧.. 这个告一段落..其它SAM,CURRY,高阶函数,集合,泛型,隐式类..这些,还是找专门的书去深入了解啦... C:\User ...

  3. ISO14443-4块传输的实现(卡)

    贴上自己的代码,目前测试通过,但我感觉结构不是很好,希望和大家交流共同提高. .H文件 #define ACKN -1 #define ACKY -2 #define RESEND -3 #defin ...

  4. Javascript的IE和Firefox兼容性汇编

    以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila Firefox 1. document.form.item 问题    (1)现有问题:        现有代码 ...

  5. C# 多线程经典示例 吃苹果

    本文主要讲述了多线程开发中经典示例,通过本示例,可以加深对多线程的理解. 示例概述: 下面用一个模拟吃苹果的实例,说明C#中多线程的实现方法.要求开发一个程序实现如下情况:一个家庭有三个孩子,爸爸妈妈 ...

  6. Drainage Ditches - poj 1273(网络流模板)

    题意:1是源点,m是汇点,求出来最大流量,没什么好说的就是练习最大流的模板题 ************************************************************* ...

  7. iOS音频处理

    ios音频处理 1. iOS底层音频处理技术(带源代码) http://www.cocoachina.com/ios/20111122/3563.html 2.ios 音频入门 http://blog ...

  8. 数据库 —— 使用JDBC操作数据库

    [Link] http://www.developer.com/java/data/manipulating-a-database-with-jdbc.html Manipulating a Data ...

  9. 使用Cordova框架把Webapp封装成Hybrid App实践——Android篇

    公司没有IOS和没有安卓开发人员,前端后端都是需要自己玩前几天技术经理说有一个需求要把webapp封装成Hybrid App,现已完成.记录一下从中遇到的问题和需要用到的开发环境的配置 将Webapp ...

  10. WebView中的视频全屏的相关操作

    近期工作中,基本一直在用WebView,今天就把它整理下: WebView 顾名思义,就是放一个网页,一个看起来十分简单,可是用起来不是那么简单的控件. 首先你肯定要定义,初始化一个webview,事 ...