Home > Developer > Web Develop
Recently doing a project that requires the realization of adaptive background, what is the background adaptive?
1. If the background graph is not high enough, the background height is 100%,background-size should be 100% auto
2. If the background graph is not wide enough, the background width is 100%,background-size should be auto 100%
What does it mean exactly? Or the code to see the effect is more convincing
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"ID= "Viewport"content= "Target-densitydpi=1,width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1" /> <title></title> <styletype= "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> <Scriptsrc=".. /js/jquery.js "type= "Text/javascript"CharSet= "Utf-8"></Script> <Scripttype= "Text/javascript"> varbg_auto_size= function(SRC) {varDH=Document.documentElement.clientHeight; varDW=Document.documentElement.clientWidth; varImg_url=src; varimg= NewImage (); IMG.SRC=Img_url; Img.onload= function() { varDratio=DW/DH; varImgratio=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' }); } } }; //The address of this image must be an absolute path, if the relative path will be error, the file can not be identified, the following path is my random, not the actual background of the true absolute path varBG= 'Https://pic.cnblogs.com/avatar/965095/20160526151113.png'; Bg_auto_size (BG); </Script> </Body></HTML>
When we go to call this background adaptive function, this path must be an absolute path, if it is a relative path, then the file will not be recognized, will be error, specific why son, I do not understand, I just tested a bit, it is true, this place, but also hope that the great God can guide.
Take Iphone4,iphone5,iphone6 as an example to show the effect:
JS background adaptive, learned
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
