背景图片随窗口大小改变自适应

效果参考

http://vip.163.com/

http://vip.sina.com.cn/

特点:背景图片在不变形的情况下尽可能的显示完整,窗口不出现滚动条,始终全屏显示

JS:

#content代表最外层的DIV,使页面全屏

.bg代表背景图片

<img src="#" class="bg" />

 //此参数表示图片缩放的比例,如果有需要定位在窗口某位置的图片,可根据此变量改变该图片的大小和坐标,使其在窗口大小改变的时候可以保持和背景固定的比例及位置,
var scale = 1;
var bgMarginTop=150;
//计算比例值
var o = 图片宽度/图片高度;
var screenWidth = $(window).width();
var screenHeight = $(window).height();
//设置窗口全屏
$("#content").css({"height":screenHeight,"width":screenWidth})
var a = screenWidth / screenHeight;
if (o > a ){
    scale = parseInt($(".bg").width())/1920;
    $(".bg").height(screenHeight+bgMarginTop*scale).width("");

}else if(o < a ) {
    scale = screenWidth/1920;
    $(".bg").width(screenWidth).height("");

}
时间: 2024-10-08 09:31:12

背景图片随窗口大小改变自适应的相关文章

使用padding代替高度实现背景图片高度按比例自适应

本篇文章由:http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionately/ 高度百分比 将高度设置成百分比时,其高度是基于父元素来定的,设置成50%,就是将该元素高度设置成 父元素的高度值 x 50%. 但是将高度设置成百分比时,往往是不生效的!高度依然为0,这是为啥? 道理很简单,那就是父元素的高度也为0. 所以这就需要讲到浏览器对宽度及高度是如何计算的. 浏览

背景图片居中全屏自适应显示

.bg{ background-size: cover;background-image:url(../assets/images/sunshine.png);background-repeat:no-repeat;background-position:center;background-attachment:fixed; }

响应式Web设计- 背景图片

背景图片可以响应式调整大小或缩放,以下是三种不同的方式 1.如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域.图片保持其比例不变: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>

CSS侧边工具栏-背景图片法

本文内容来自慕课网的侧栏工具条开发. 效果:   鼠标划过每一个小方框,切换图片,且微信和APP会在左边显示二维码图 实现原理:鼠标划过--背景图片位置的改变,二维码图片从0.01的比例变为1,不透明变透明 HTML部分: <!doctype html><html lang="zh-cn"><head>    <meta charset="utf-8">    <meta http-equiv="X-U

CSS3:background-size背景图片尺寸属性

background-size可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置background-origin设置其图片覆盖的范围.那么下面我们一起来了解这个background-size属性吧. background-size语法 w3c对background-size的语法规定如下: 属性名: background-size 属性值: <bg-size>* 其中 bg-size = [ <length> | <pe

背景图片自适应分辨率浏览器大小自动拉伸全屏代码

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1"> <img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" /> </div&

cell添加选中时的背景图片、显示图片和图片自适应框的大小

1.给cell添加选中时的背景图片 UIView *myview = [[UIView alloc] init]; myview.frame = CGRectMake(0, 0, 320, 47); myview.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"0006.png"]]; cell.selectedBackgroundView = myview; 2.显示图片 CGRect my

iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片

1.改变高度 自定义UINavigationBar的新类别: [cpp] view plaincopy //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation.h> @interface UINavigationBar (BackgoundImage) @end 在新类别的实现中,覆盖原有类的方法 - (void)drawRect:(CGRect)rect : [cpp] view plaincopy //UINavi

CSS控制背景图片100%自适应填充布局

原文地址:http://blog.csdn.net/wd4java/article/details/50537562 .personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute; filter: progid:DXImageTransform.Mi