js背景自适应,学到了

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

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

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

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

<!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为例展示效果:

时间: 2024-10-01 04:40:24

js背景自适应,学到了的相关文章

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

效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实现自适应宽度的Tag切换 - HoverTree</titl

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

插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传入最外层盒子ID即可. 1.根据html中的Dom结构引入图片. 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度,单位为像素,默认自适应全屏. outer:最外层盒子ID,默认为"outer" time:轮播的时间间

html5中 背景自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

js 背景图随浏览器大小而变化,且保持图片不变形

<html> <head> <style> body{ overflow:hidden; } #pic{ margin:0 auto;width:100%;height:100%;padding:0;max-width:100%;position:relative; } #img{ position:absolute;left:0px;top:0px; } </style> </head> <body> <div id=&quo

div 背景自适应

.bg { background: url(images/title_bg.jpg); filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size: 100% 100%; background-size: 100% 100%; height: 150px; } <div class="bg">      &

安卓开发入门指南--安卓手机自适应draw9patch不失真背景设置具体步骤

一.[安卓手机自适应draw9patch不失真背景]实际问题 前一段时间,去长江玩了一趟,拍了很多照片,不过都是手机拍的,正常尺寸都是看不清楚老婆的脸蛋,就不自在的开始放大放小,可是一定程度图片就失真了.不知道你们都遇见过这样的情况吗?其实作为一个程序开发者,我很清楚这个手机自适应draw9patch不失真背景不怎么好,今天不妨就实际问题给大家解决一下. 首先背景自适应且不失真问题的存在已经给大家聚过例子了,希望大家多在生活中观察,遇到任何安卓app问题,可加QQ群:175229978进行交流.

学HTML5必须要学JS吗

学习html5的话,如果你是想作为一个前端人员的话,js是必须要学的,这里我给你一些建议: 1.学习目录:html >> css >> js >> html5 >> css3(书籍的话,我建议你<Head First HTML and CSS>这本书还是蛮不错的, 2.进阶:学js的时候建议视频和书配套,视频主入门,书主细节.深入: 3.学习方法:至于html和css可以看看视频学习,初期学习不一定要求那么高,要精通,有大概的映像就行,在后面学习

项目实战JS之滚动条

实战背景: 学了BS好几个月了,神马新闻系统.HTML.CSS...直到JS,这一路走来,有点蒙圈的感觉.俗话说:实践检验真理,我有幸参加了某网站的维护工作. 需求简介: 简单介绍一下这次维护工作的任务1: 在这个页面中,我需要做的任务2是: 我从用户的角度来考虑,是这样的:初次打开这个页面是,只能看到功能B的一部分.然而用户想去点击功能B时,必定需要向下滚动,这时我让功能A收缩,这样用户立马就能看见功能B和功能C了:当用户浏览content后,滚动条向下移动了很多,已经看不见功能列表了,这样用

CSS背景图拉伸不变形

在线效果体验:http://hovertree.com/texiao/mobile/3.htm 请使用手机浏览器查看. css代码: .bg{ background:url(http://hovertree.com/texiao/mobile/3/hovertree01.jpg); filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"; -moz-background-size