登录页背景图缩放

最新推荐文章于 2023-07-11 10:53:45 发布

闪耀星星

最新推荐文章于 2023-07-11 10:53:45 发布

阅读量294

点赞数

分类专栏：前端文章标签：登录背景

本文链接：https://blog.csdn.net/zhchfsky/article/details/115647238

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了如何根据设备宽高比动态调整背景图片的缩放和偏移，确保核心内容在不同终端上都能清晰展示。通过CSS和JavaScript实现背景层的隐藏与显示，以及登录页面元素的定位，保证了在屏幕尺寸变化时，登录表单不会被页脚遮挡。同时，针对屏幕较小的情况，调整了页脚的位置，避免出现滚动条。

摘要由CSDN通过智能技术生成

一个背景图无法适配所有终端的尺寸，所以需要根据宽高比，缩放背景图，然后偏移背景图，显示核心区域内容。

<body>
    <div class="bg">
        <img src="/images/loginbg.jpg" alt="背景" class="bg"/>
    </div>
	<!--登录内容-->
    <div class="content">
	    <!--登录标题-->
        <div class="login-header">
		登录标题
		</div>
		<!--登录表单-->
        <form class="layui-form">
            登录表单
        </form>
		<!--登录页脚（绝对定位）-->
        <div class="login-footer">登录页脚</div>
    </div>
</body>

样式，关键点（背景层开始是0宽，0高）

	div.bg {
		position:absolute;
		width:0;
		height:0;
		top:0;
		left:0;
		z-index:-1;
		overflow:hidden;
	}

	img.bg{
		position: relative;
	}

	.login-header{
		text-align: center;
		font-size:1.5em;
		color:white;
		margin:40px auto 80px;
	}

	.layui-form{
		text-align:center;
		margin:0 30px;
	}

	.login-footer{
		position: absolute;
		right:30px;
		bottom: 20px;
		font-size:1.2em;
		color:white;
	}

	@media screen and (max-height:353px) {
		.login-footer {
			margin:20px 30px 20px 0;
			position:unset;
			text-align:right;
			font-size:1.2em;
		}
	}

防止页脚盖住表单，屏幕小的时候，会使用相对定位，页面会产生滚动条。

resize代码

$(function(){
    window.onresize = resize;
    resize();
});

function getNaturalSize(img)
{
	if (img.naturalWidth) {
	　　w = img.naturalWidth;
	　　h = img.naturalHeight;
	} else {
	　　// IE 6/7/8
	　　var nImg = new Image();
	　　nImg.onload = function () {
	　　　　w = nImg.width;
	　　　　h = nImg.height;
	　　}
	　　nImg.src = img.src;
	}
	return {width:w,height:h};
}

function resize()
{
	var bg = $("div.bg"),bgimg = $("img.bg"),footer = $(".login-footer");
	var wh = getNaturalSize(bgimg[0]);
	//footer.outerHeight(false)，false表示不包含margin大小。
	//绝对定位bottom为20，相对定位margin-bottom为20，必须要设为一样的，
	var w = $(window).width(),h = footer.offset().top+footer.outerHeight(false)+20;
	//背景尺寸
	bg.css({width:w,height:h});
	if(w/h > wh.width/wh.height)
	{
	    //比原图稍宽，则宽度最大，高度展示底部，图片上偏移
		bgimg.css({height:w*wh.height/wh.width,left:0,width:w,top:h - w*wh.height/wh.width});
	}
	else
	{
	    //比原图稍高，则高度最大，宽度展示中间位置，图片左偏移
		bgimg.css({width:h*wh.width/wh.height,top:0,height:h,left:(w-wh.width*h/wh.height)/2});
	}
}