全屏自适应背景图

蔚落 2022-08-25 12:58 254阅读 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 条评论，254人围观）

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

相关阅读

相关 Bootstrap CSS 背景图自适应全屏显示不失真亲测有效（2019.10.16）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

刺骨的言语ヽ痛彻心扉/ 2024年02月19日 13:29/ 0 赞/ 6 阅读

相关 HTML背景图片自适应全屏幕

margin: 0px; background-image: url(/resource/error-bg.png); background-rep

拼搏现实的明天。/ 2023年06月27日 03:52/ 0 赞/ 44 阅读

相关 div背景图自适应占满

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

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

相关全屏自适应背景图

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

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

相关 iframe 自适应全屏

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

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

相关背景图全屏问题

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

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

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

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

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

相关 css背景图自适应

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

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

相关背景图铺满全屏

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

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

相关 CSS 让背景图自适应width

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

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