Question

我正在研究一个实验艺术网站，其中涉及每个缩放到视口大小的图像网格。页面主体的背景应该是一个拉伸图像，它在一个点上工作但已停止运行。背景颜色显示，图像根本没有。但是，如果在Chrome检查器中关闭了背景大小的CSS，则会显示自己的大小位于顶部和左侧......

我猜测身体包含一个相当于5个视口宽度的盒子，5个视口高度正在弄乱身体元素的大小是什么？虽然允许bg图像重复但没有显示出来......

我通过在JavaScript中抓取屏幕宽度和高度然后将background-size设置为这样的值来解决这个问题：

$('body,html').css('background-size',the_width + 'px ' + the_height+'px');

但我的问题仍然是 - 为什么background-size:100% 100%停止工作？

页面HTML看起来只有25个div和图像。

<body>
<div id="box">
  <div class="full" id="full_10">
    <img src="home_tiles/10.jpg" width="800" height="600" title="10">
  </div>
  <div class="full" id="full_11">
    <img src="home_tiles/11.jpg" width="800" height="600" title="11">
  </div>
 </div>
</body>

CSS看起来像这样

  * { padding: 0; margin: 0; }

  html, body { 
    overflow:hidden; 
    background-color: #FF0000; 
    background-size: 100% 100%;
    background-image:url(home_tiles/edge.jpg);
    background-repeat:no-repeat;
  }

  img { display: block; }

  #box {
      position:absolute;
  }

  .full {
    float:left;
  }

JavaScript调整图像大小

$(function() {  
  $('.full').hide();
  var win = $(window),
      fullscreen = $('.full'),
      image = fullscreen.find('img'),
      imageWidth = image.width(),
      imageHeight = image.height(),
      imageRatio = imageWidth / imageHeight;
  var the_width; 
  var the_height; 
  var left_limit;
  var right_limit;   

  function resizeImage() {
    var winWidth = win.width(),
        winHeight = win.height(),
        winRatio = winWidth / winHeight;

    if(winRatio > imageRatio) {
      the_width = winWidth;
      the_height = Math.round(winWidth / imageRatio);
    } else {
      the_width =  Math.round(winHeight * imageRatio);
      the_height = winHeight;
    }

    left_limit = the_width * -2;
    right_limit = the_width * 2;

    image.css({
        width: the_width,
        height: the_height
    });
    $('#box').css({
      width: the_width * 5,
      height: the_height * 5,
      top: the_height * -2,
      left: the_width * -2
    });
  }

  win.bind({
    load: function() {
      resizeImage();
      $('.full').show('slow');
    },
    resize: function() {
      resizeImage();
    }
  });

拉伸的背景停止工作

0 个答案: