Question

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

我正在尝试按比例调整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>

Answer 1

您可以使用普通的<img>代码并使用绝对定位来模拟背景，而不是使用真实背景。概念验证：http://jsfiddle.net/yahavbr/vu4Zh/

HTML code：

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

CSS：

#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; }

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

Answer 2

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

在div中缩放背景图像

2 个答案: