全屏自适应背景图

蔚落 2022-08-25 12:58 299阅读 0赞

主要代码下：

(function($) {
$.fn.fullBg = function(){
var bgImg = $(this); function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height(); var winwidth = $(window).width();
var winheight = $(window).height(); var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight; var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight; if(heightdiff>winheight) {
bgImg.css({
width: winwidth+’px’,
height: heightdiff+’px’
});
} else {
bgImg.css({
width: widthdiff+’px’,
height: winheight+’px’
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();//当窗口大小变化时改变图片的大小
});
};
})(jQuery)

主要结构：



相关样式：

.fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
} #maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50;
}

发表评论

表情：
评论列表 （有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

    相关 css背景图自适应

    在开发时，修改了d2admin的登录页面。使用了背景图片，但是ui给的图过于大（可能是我电脑屏幕小哈）无法完整的显示到页面上，所以修改了代码，可以完整显示背景图。 代码如下：

    迈不过友情╰迈不过友情╰/ 0 赞/ 471 阅读