1

我正在尝试在自定义 Drupal 主题中制作响应式背景幻灯片。幻灯片部分由 Drupal 的模块（视图、幻灯片）覆盖，图像由 CSS 定位。现在，我编写了一个简单的 jQuery 代码，可以让图像拉伸并填满屏幕。我以为一切都很好，直到我在 IE 中测试它。后来，我发现了更多的问题。所以，他们在这里：

1. In IE9, this code works only on first image, others keep their original sizes. 
2. In IE8 there is no background images at all on the screen. 
3. In Firefox, after a while, browser crash.

我的这个小代码可能有严重问题，但我找不到什么：

    $(document).ready(function() {
    stretchBg();
    var windowWidth;
    var windowHeight;
    var imageWidth;
    var ratio;
    var imageHeight;
    function stretchBg() {
    windowWidth = $(window).width();
windowHeight = $(window).height();
$('#background img').each(function() {
  imageWidth =  $(this).attr('width');
  ratio = parseFloat(windowWidth / imageWidth).toFixed(2);
  imageHeight = $(this).attr('height') * ratio;
  if(windowHeight <= imageHeight) {
    $(this).attr('width', windowWidth);
    } else {
    $(this).attr('height', windowHeight);
  }
}); 
    }  
    $(window).resize(function() {
    stretchBg();
    });
    });

注意：我对图像使用 attr() 而不是 width()，因为它们被 display:none 属性隐藏，并且在加载之前无法检索它们的尺寸。

非常感谢您，非常感谢您的帮助。

4

0 回答 0