最近在做一个项目，要求实现背景自适应，何为背景自适应呢？

1.如果背景图高度不够，background-size就应该是 auto 100%

2.如果背景图宽度不够，background-size就应该是100% auto

具体是什么意思呢？还是上代码看到效果比较有说服力

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" id="viewport" content="target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1" />

        <title></title>

        <style type="text/css">

            div {

                position: fixed;

                top: 0;

                left: 0;

                bottom: 0;

                right: 0;

                background-image: url(../img/littleboy.png);

                background-position: center 0;

                background-repeat: no-repeat;

                background-size: 100% auto;

            }

        </style>

    </head>

    <body>

        <div></div>

        <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var bg_auto_size = function(src) {

                var dh = document.documentElement.clientHeight;

                var dw = document.documentElement.clientWidth;

                var img_url = src;

                var img = new Image();

                img.src = img_url;

                img.onload = function() {

                    var dRatio = dw / dh;

                    var imgRatio = img.width / img.height;

                    if(dRatio <= imgRatio) {

                        $('div').css({ 'background-size': 'auto 100%', 'background-position': 'center 0' });

                    } else {

                        $('div').css({ 'background-size': '100% auto', 'background-position': 'center 0' });

                    }

                }

            };

            //这个图片的地址必须是绝对路径，如果用相对路径就会报错，文件识别不出，下面路径是我随便找的，不是实际背景的真实绝对路径

            var bg = 'https://pic.cnblogs.com/avatar/965095/20160526151113.png';

            bg_auto_size(bg);

        </script>

    </body>

</html>

在我们去调用这个背景自适应的函数的时候，这个路径必须是绝对路径，如果是相对路径，那么文件就会识别不出，就会报错，具体为啥子，我也搞不懂，我只是测试了一下，确实是这样，这地方，还希望大神能够指点。

以iPhone4，iPhone5，iPhone6为例展示效果：

js背景自适应，学到了的更多相关文章

  1. FullBg-网页图片背景自适应大小

      网页背景自适应大小jQuery插件 fullBG.js http://cbavota.bitbucket.org/fullbg/ HTML <img id="background& ...

  2. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  3. 基于js的自适应、多样式轮播图插件（兼容IE8+、FF、chrome等主流浏览器）

    插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...

  4. js图片自适应尺寸居中函数处理

    /* | autoSerializePicture.js 自适应格式化图片 | auther : baichaohua/2017-09-21 +---------------------------- ...

  5. 【JS】374- 重学 this 关键字

    为什么要学习this关键字 1. 面试会问啊!总有一些面试官喜欢问你一段不可能这么写的代码.看一道经典且古老的面试题(学完本文后,文末会有一道更复杂的面试题等着你哦!) 代码如下: let a = 5 ...

  6. 读jquery.cookie.js源码学到的几个技巧

    一.兼容AMD.CommonJS和普通JS的写法 (function (factory) { if (typeof define === 'function' && define.am ...

  7. js 背景自动切换

    //首页自动更换背景特效开始============================================ var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组 ...

  8. less常用样式集，清除浮动、背景自适应、背景渐变、圆角、内外阴影、高度宽度计算。

    .clear-float() { content: ''; display: block; clear: both; height:; } //伪元素清除浮动 .after-clear() { &am ...

  9. VUE -- Vue.js每天必学之计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

随机推荐

  1. 关于定时发送服务的解决办法(PHP)

    一.定时发送任务解析 在进行手机APP或者微信开发的时候,经常会有需要定时推送消息的场景. 定时发送又分为两种: 一种是在开发的时候固定时间,后台管理人员只能选择将要推送的消息: 另一种是后台管理人员 ...

  2. Mac IDEA插件——protobuf 插件

    最近在搞PB的版本的升级,历史的PB的版本是2.4,现在是打算升级到3.2,当面PB的版本肯定有很多变化了,就不再这里多说了,这里重点说一说,采用IDEA的插件方便执行PB的文件的JAVA编译,这样的 ...

  3. Android NDK开发之从环境搭建到Demo级十步流

    写在正文之前: 几个月没有更新博客,感觉有点生疏了,所以说不能断,一断人就懒. 其实这几个月也并不是什么事也没有做,俺可是时刻想着今年的任务呢,10本书,30篇博文...,这几个月间断性的也是在学习中 ...

  4. Angular2.js——多个组件

    目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要 ...

  5. PL/SQL 自动补全[转]

    1.新建 shortcuts.txt 内容如下: s = SELECT t.* FROM t w = WHERE b = BETWEEN AND l = LIKE '%%' o = ORDER BY ...

  6. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  7. ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist

    Oracle 设置默认数据库 如果我们的服务器上或者电脑上安装了多个数据库,当我们使用sqlplus时如果为指定数据库时登录到的是哪一个数据库呢?今天遇到了一个老问题: ORA-01034: ORAC ...

  8. JQuery 中关于插入新元素的方法

    关于JQuery插入新内容的方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - ...

  9. java虚拟机总结

    jvm内存模型 u  程序计数器 u  Java栈(虚拟机栈) u  本地方法栈 u  Java堆 u  方法区及其运行时常量池 垃圾回收机制 u  新生代和老年代 u  参数设置 u  垃圾回收(M ...

  10. javascript的面向对象详解

    每次说到javascript到面向对象,总感觉自己心里懂,但是却不知道该怎么说,这就是似懂非懂到表现,于是乎,每次一说,就要到处去查找资料,零零碎碎到看了一些,感觉有懂了,但是过段时间,好像又不知道是 ...