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

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

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. BZOJ1533: [POI2005]Lot-A Journey to Mars

    1533: [POI2005]Lot-A Journey to Mars Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 174  Solved: 76[S ...

  2. 199bit总结的影响最大的十个算法

    1. 归并排序(MERGE SORT).快速排序(QUICK SORT)和堆积排序(HEAP SORT) 哪个排序算法效率最高?这要看情况.这也就是我把3种算法放在一起讲的原因,可能你更常用其中一种, ...

  3. 【转】Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    原文网址:http://blog.csdn.net/xiaanming/article/details/17539199 转帖请注明本文出自xiaanming的博客(http://blog.csdn. ...

  4. linux中的cd ..和cd -命令有什么区别？

    cd ..是返回上一层目录, cd -是返回到上一次的工作目录,如果当前目录是/执行cd /usr/local再执行cd ..就是到 /usr而执行cd -就是到/

  5. Foundation: Binary Search

    /* Binary search. * * Implementation history: * 2013-10-5, Mars Fu, first version. */ /* [Binary Sea ...

  6. oracle11g 导入空表的办法

    ORACLE 11G中有个新特性,当表无数据时,不分配segment,以节省空间 这样会出现导入导出数据库的时候报错,提示空表没有被还原,缺少表的情况 解决方法: 设置deferred_segment ...

  7. 浅析Linux系统下用户与权限管理

    Linux作为一种多用户多任务操作系统,在日常的使用中不可避免地要划分出一个角色的概念来管理和使用计算机,这个角色与每一个计算机使用者关联,在Linux中称这种角色为用户.而在每一个用户使用计算机的过 ...

  8. jquery animate

    $(".logo").animate( { opacity: .25, //将不透明度逐渐变成.25 height: 0 //高度逐渐变成0 }, { duration: 1000 ...

  9. Object -C NSSet -- 笔记

    // //  main.m //  NSSET // //  Created by facial on 25/8/15. //  Copyright (c) 2015 facial_huo. All ...

  10. Linux系统下查看某文件修改的时间戳

    Linux系统下查看某文件修改的时间戳查看文件时间戳命令:stat awk.txt File: `awk.txt' Size: 20              Blocks: 8          I ...