jQuery плагин изменение размера только фоновое изображение

Question

Я начал использовать/узнать html/css/jquery два дня назад, чтобы развить свой сайт и его почти готов только с одной проблемой.

Я использую этот удивительный плагин jquery c.bavota для создания фонового изображения, которое изменит размер до полной ширины/высоты окна браузера!

Это прекрасно работает, но проблема в том, что у меня есть другие изображения на фоне (не могу прикрепить/объединить их в одном фоновом изображении), и когда я увеличиваю масштаб фонового изображения, но мои другие изображения остаются того же размера и в их местоположении, что не является правильным.

Итак, моя первая мысль заключается в создании новой функции, которая также изменяет размеры других изображений таким же образом.

Функции Я хочу изменить ...

<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); \t \t 
 
    
 
    function resizeImg() { 
 
     var imgwidth = bgImg.width(); 
 
     var imgheight = bgImg.height(); 
 
\t \t \t 
 
     var winwidth = $(window).width(); 
 
     var winheight = $(window).height(); 
 
\t \t 
 
     var widthratio = winwidth/imgwidth; 
 
     var heightratio = winheight/imgheight; 
 
\t \t \t 
 
     var widthdiff = heightratio * imgwidth; 
 
     var heightdiff = widthratio * imgheight; 
 
\t \t 
 
     if(heightdiff>winheight) { 
 
     bgImg.css({ 
 
      width: winwidth+'px', 
 
      height: heightdiff+'px' 
 
     }); 
 
     } else { 
 
     bgImg.css({ 
 
      width: widthdiff+'px', 
 
      height: winheight+'px' 
 
     }); \t \t 
 
     } 
 
    } 
 
    resizeImg(); 
 
    $(window).resize(function() { 
 
     resizeImg(); 
 
    }); 
 
    }; 
 
})(jQuery) 
 
     }); 
 

 
$(window).load(function() { 
 
\t $("#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>

функции, чтобы проверить его. Значит, любые мысли о том, как это работает? и/или как передать изображение в функцию? Благодаря

Answer 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>