jquery插件仅调整背景图像的大小答案

【问题标题】：jquery plugin resizing only background imagejquery插件仅调整背景图像的大小
【发布时间】：2016-01-08 07:07:04
【问题描述】：

两天前我开始使用/学习 html/css/jquery 来开发我的网站，它几乎准备好了，只有一个问题。

我使用 c.bavota 这个很棒的 jquery 插件来创建一个背景图像，它将调整到浏览器窗口的整个宽度/高度！

效果很好，但问题是我在背景上有其他图像（无法将它们附加/组合到一个背景图像中），当我缩放背景时会调整大小，但我的其他图像保持相同大小并位于它们的位置不对。

所以我的第一个想法是创建一个新函数，它也以同样的方式调整其他图像的大小。

我要编辑的函数……

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 $(document).ready(function() {
            /**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(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)
         });

$(window).load(function() {
	$("#background").fullBg();
});

我曾尝试在我的非背景图像上使用此功能，但结果却太大了…… 我的猜测是如果我更换了 $(window).width();例如 $(Background).width();并调用 $("#imagetoberesized").fullBg(); 上的函数.height 也一样它可能会起作用。但是我缺乏 jquery 技能来传递图像中的图像

<img src="imagepath/Main2.jpg" alt="" id="background"/>
<div class="Image">
<a href="#" class="tooltip">
<img src="imagepath/imagei.jpg" id="imagetoberesized"/>
  <span>
        <h3>Text</h3>
   </span>
</a>
</div>

到函数来测试它。那么有什么想法/如果它会起作用吗？和/或如何将我的图像传递给函数？谢谢

【问题讨论】：

嗨@Cryptic 你所有的代码都在内容上，如果不是，请显示更多细节，谢谢
“你所有的代码都在内容上”你到底想问我什么？你想让我发布我所有的 index.html 吗？
真的吗？？比如“背景”
它的背景图片！肯定会把它添加到 html sn-p 中。
我再举一个例子，希望能帮助你解决问题

标签： jquery jquery-plugins background image-resizing

【解决方案1】：

嗨@CrypticKiwi 希望这个代码是你想要的
顺便说一下，如果有任何问题，请告诉我

(function($) {
    $.fn.fullBg = function(){
        var bgImg = $(this);

        bgImg.addClass('fullBg');

        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();
        }); 
    };

    $.fn.fullBg1 = function () {
        var bgImg = $(this);
        alert(bgImg.width())
        bgImg.addClass('fullBg');

        function resizeImg() {
            var imgwidth = bgImg.width();
            var imgheight = bgImg.height();

            var winwidth = $(window).width()/10;
            var winheight = $(window).height()/10;

            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)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Full Size Background Image jQuery Plugin - Demo | bavotasan.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fullbg.js"></script>
<style type="text/css">
.fullBg {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index:-90;
}
.fullBg1 {
    position: fixed;

    overflow: hidden;
    z-index:10;
}

#maincontent {
    position: absolute;
    top: 300px;
    left: 0;
    z-index: 50;
    width: 100%;
    background: #fff;
    opacity: 0.9; 
    filter: alpha(opacity=90);
    }

#box {
    width: 600px;
    margin: auto;
    padding: 0 10px;
    }

h1 { 
    margin-top: 12px;
    font-size: 40px;
    text-align: center;
    line-height: 44px;
    font-weight: normal;
    font-family: Georgia,serif;
    color: #222;
    }

h2 { 
    margin-top: 0;
    font-size: 24px;
    line-height: 28px;
    font-weight: normal;
    font-family: Georgia,serif;
    color: #C52D08;
    }

a {
    text-decoration: none;
    outline: none;
    color: #C52D08;
    }

    a:hover {
        text-decoration: underline;
        }
</style>
</head>

<body>
<img src="images/bg.jpg" alt="" id="background" />
<div id="maincontent">
    <div id="box">
        <h1>Full Size Background Image jQuery Plugin</h1>
        <h2>Demo</h2>
        Just resize this window and you will see the plugin in action. Whenever the window size changes, the background image size changes. AND it always stays in the proper aspect ratio.
        <p><a href="http://bavotasan.com/?p=1748">&laquo; back to tutorial</a></p>
    </div>
</div>
    <img src="http://static.adzerk.net/Advertisers/af217662e49a4cbda030feae88418cdd.png" id="imagetoberesized" style="width:100px;height:100px;" />
<script type="text/javascript">
$(window).load(function() {
    $("#background").fullBg();
    $("#imagetoberesized").fullBg1();
});
</script>
</body>
</html>
<script>

</script>

【讨论】：

如果你愿意，我会给你所有的代码和参考。
不，这不是我想要的，运行此脚本后，您发布的背景保持不变，只有添加到背景中的图像会放大和缩小。我想要的是背景和图像一起调整大小，即：我发布的脚本做了什么（调整背景大小以适应窗口（使用缩放），并用它调整所有其他图像的大小）。我试图合并这两个脚本，但没有产生预期的结果。如果您能告诉我如何将#background 传递给我发布的函数，那就太好了，这样我就可以进行实验了……谢谢您的帮助……
嗨，我明白了，抱歉我现在没有电脑，但我会在下周一再试一次。
Hi@CrypticKiwi 我已经更改了我的答案内容，我希望这段代码可以帮助你，如果没有请告诉我，谢谢，Willie