Javascript 缩放div中的背景图像_Javascript_Jquery_Html

Javascript 缩放div中的背景图像

javascript jquery html

Javascript 缩放div中的背景图像,javascript,jquery,html,Javascript,Jquery,Html,我知道有一些插件用于缩放网页的背景图像，但这有点不同我试图让一个div按比例调整大小，并且让背景图像也按比例调整大小。它用于水平调整大小 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content

我知道有一些插件用于缩放网页的背景图像，但这有点不同

我试图让一个div按比例调整大小，并且让背景图像也按比例调整大小。它用于水平调整大小

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title></title>
 <style type="text/css" media="screen">

  body {
   background: #000;
   overflow-x: hidden;
   overflow-y: hidden;
  }
  #bg
  {
   z-index: -1;
   position: absolute;
   top:0;
   left:0;
  }

  #wrap
  {
   position: relative;
   margin: 0 auto;
  }
 </style>

</head>
<body>

 <div id="wrap">
  <img src="bg.jpg" id="bg" width="100%" />


  hi
 </div>
 <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">

 </script>
 <script type="text/javascript" charset="utf-8">

  var minWidth = 400;
  var minHeight = 400;
  var maxWidth = 500;
  var maxHeight = 500;

  function resize() {
   var windowWidth = $(window).width();
   var windowHeight = $(window).height();

   var w = windowWidth < minWidth ? minWidth :
   windowWidth > minWidth && windowWidth < maxWidth ? windowWidth :
   windowWidth > maxWidth ? maxWidth :
   minWidth;

   var h = windowHeight < minHeight ? minHeight :
   windowHeight > minHeight && windowHeight < maxHeight ? windowHeight :
   windowHeight > maxHeight ? maxHeight :
   minHeight;

   $("#wrap").css({
    'width': w + 'px',
    'height': h + 'px'
   });





  }

  $(document).ready(function() {

   resize();
      $(window).resize(function() {
        resize();
      });
  });


 </script>


</body>
</html>


身体{
背景：#000；
溢出x：隐藏；
溢出y：隐藏；
}
#背景
{
z指数：-1；
位置：绝对位置；
排名：0；
左：0；
}
#包裹
{
位置：相对位置；
保证金：0自动；
}
你好
var minWidth=400；
var最小高度=400；
var maxWidth=500；
var maxHeight=500；
函数resize（）{
var windowWidth=$（window.width（）；
var windowHeight=$（window.height（）；
var w=窗宽<最小宽度？最小宽度：
windowWidth>minWidth&&windowWidth最大宽度？最大宽度：
最小宽度；
var h=窗高<最小高度？最小高度：
windowHeight>minHeight&&windowHeight最大高度？最大高度：
最小高度；
$（“#wrap”）.css({
“宽度”：w+“px”，
“高度”：h+“px”
});
}
$（文档）.ready（函数（）{
调整大小（）；
$（窗口）。调整大小（函数（）{
调整大小（）；
});
});

您正在拉伸图像所在的div（该div工作正常）。但是图像没有给定百分比高度，因此在调整父DIV的大小时不会受到影响

您可以使用普通的

标记，而不是使用真实背景，并使用绝对定位模拟背景。。概念证明：

HTML代码：

这样，图像将自动缩放到其容器，不涉及脚本。

您可以使用普通的

标记，并使用绝对定位模拟背景，而不是使用真实背景。。概念证明：

HTML代码：

这样，图像将自动缩放到其容器，不涉及脚本。

示例中的图像不是背景图像，而是常规IMG元素。背景图像应该是CSS图像。示例中的图像不是背景图像，而是常规的IMG元素。背景图像将是CSS图像。如果只放入一个维度，它将按比例缩放图像。我有一个改变维度的标志，但jQuery不会将维度设置为100%（宽度或高度）。啊，好吧，我误解了你的意思-我试过你的例子，遇到的问题是，只有当我使窗口水平变小时，调整大小才起作用，而垂直方向则不起作用。你到底有什么问题还不太清楚。也许你可以编辑你的原始文章并添加一个例子。是的，我也在尝试垂直获取它。如果只放入一个维度，它将按比例缩放图像。我有一个改变维度的标志，但jQuery不会将维度设置为100%（宽度或高度）。啊，好吧，我误解了你的意思-我试过你的例子，遇到的问题是，只有当我使窗口水平变小时，调整大小才起作用，而垂直方向则不起作用。你到底有什么问题还不太清楚。也许你可以编辑你原来的文章，并添加一个例子。是的，我也在尝试垂直。谢谢你。我不确定我的意图是否明确-容器的宽度和高度必须有最小值和最大值。@htm您所说的最小值和最大值是什么意思？谁定义了这些价值观，在哪里？它应该如何应用？谢谢你。我不确定我的意图是否明确-容器的宽度和高度必须有最小值和最大值。@htm您所说的最小值和最大值是什么意思？谁定义了这些价值观，在哪里？如何应用？

<div id="ImageContainer">
   <img class="background" src="mybackground.gif" border="0" />
    <div class="contents">
        Hello World
    </div>
</div>

#ImageContainer { width: 300px; position: relative; }
#ImageContainer .background { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; }
#ImageContainer .contents { position: absolute; left: 0px; top: 0px; z-index: 99; }