カスタム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();
});
});
注:画像はdisplay:noneプロパティで非表示になっており、読み込まれる前にサイズを取得できないため、画像にはwidth()ではなくattr()を使用しています。
どうもありがとうございました、私はあなたの助けに非常に感謝します。