全屏自适应背景图

蔚落 2022-08-25 12:58 223阅读 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)

主要结构：

<img src="your-background-image.jpg" alt="" id="background" />   
<div id="maincontent">   
   
</div>

相关样式：

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

发表评论取消回复

表情：

评论列表（有 0 条评论，223人围观）

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

相关阅读

相关 div背景图自适应占满

css代码： background-image: url(../imgs/footerkuang.png); background-repeat: no-re

女爷i/ 2022年12月21日 04:54/ 0 赞/ 149 阅读

相关 React-全屏、取消全屏及自适应防抖处理

文章目录前言一、html部分二、ts/js 1.全屏事件 2.取消全屏及防抖处理 ------------------

た入场券/ 2022年10月17日 01:46/ 0 赞/ 302 阅读

相关全屏自适应背景图

主要代码下： (function($) \{ $.fn.fullBg = function()\{ var bgImg = $(this); func

蔚落/ 2022年08月25日 12:58/ 0 赞/ 224 阅读

相关 iframe 自适应全屏

<iframe src="..." width="100%" height="100%"></iframe> 一定要在在页面的最顶部加 <!DOCTYP

男娘i/ 2022年06月17日 10:56/ 0 赞/ 229 阅读

相关背景图全屏问题

html,body\{ padding: 0; margin: 0; width: 100%;

喜欢ヅ旅行/ 2022年06月02日 08:20/ 0 赞/ 241 阅读

相关转：如何让body背景图自适应浏览器窗口大小、全屏100%展示

转自：[https://blog.csdn.net/annaluo/article/details/78280251][https_blog.csdn.net_annaluo_

ゞ浴缸里的玫瑰/ 2022年03月06日 14:24/ 0 赞/ 446 阅读

相关 css背景图自适应

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

迈不过友情╰/ 2022年01月06日 14:09/ 0 赞/ 380 阅读

相关背景图铺满全屏

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

桃扇骨/ 2021年11月17日 11:22/ 0 赞/ 363 阅读

相关 Ubuntu16 虚拟机全屏自适应

1. sudo apt-get install open-vm-tools 2. sudo apt-get install open-vm 3.

青旅半醒/ 2021年09月27日 10:28/ 0 赞/ 355 阅读

相关 CSS 让背景图自适应width

在div或者其他容器的style添加 background-size: cover !important; <table style="height:333px;

Love The Way You Lie/ 2021年09月25日 04:50/ 0 赞/ 360 阅读