1

私は奇妙な問題を抱えています。作業中のサイトで画像のサイズを変更する小さな関数を作成しました。動的にサイズ変更されるコンテナーにある 2 つを除いて、サイトのすべての画像に対して機能します。IE10 と Firefox では、どちらも画像の幅/高さを一貫性なく使用し、代わりに奇妙な数値を吐き出し、数式が画像のサイズ変更を台無しにします。

私がやろうとしていることの全体像は次のとおりです。サイトの 1 つのセクションは、画面の高さ全体から、固定ナビゲーション メニューを考慮して 60px を差し引いたものです。2 つの画像はこのセクション内にあり、高さと幅の半分である必要があります (このセクションには 4 つの均等なサイズの正方形があり、そのうちの 2 つに問題の画像が含まれています)。セクションの高さはページ読み込み時に動的に計算されるため (ブラウザーの高さの 100% から 60px を差し引いた値)、コンテナーの高さが適切に計算される前にこの関数が実行されることがあると想定しているため、画像が奇妙にスケーリングされます。

関連するすべてのコードは次のとおりです。

function onResize() {

    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

    $("#FourSquareSectionContainer").css("height", h - 60 );

    ResizeItem($("#SecondSquareBGImage"), (w / 2), ((h - 60)  / 2));
    ResizeItem($("#ThirdSquareBGImage"), (w / 2), ((h - 60)  / 2));

}

function ResizeItem(item, w, h) {

    var aspect = item.width() / item.height();
    var SlideWidth = aspect * h;
    var SlideHeight = w / aspect;

    if (SlideWidth < w) SlideWidth = SlideHeight * aspect;
    if (SlideHeight < h) SlideHeight = SlideWidth / aspect;

    item.width(SlideWidth);
    item.height(SlideHeight);
    item.css('top', Math.ceil((h - SlideHeight) / 2));
    item.css('left', Math.ceil((w - SlideWidth) / 2));

}

私の推測では、FourSquareSectionContainer の高さは動的であるため (常にページの全高よりも 60px 小さいと想定されています)、SecondSquareBGImage と ThirdSquareBGImage の高さはこの高さに依存しているため (どちらも半分になるはずです) FourSquareSectionContainer の高さとその幅の半分)、画像に間違ったサイズが使用され、画像が引き伸ばされすぎるという、ある種の競合状態が発生しています。

この問題は、IE10 と Firefox でのみ (これも一貫性がありません) 発生することに注意してください。Chrome と Safari では、この問題は発生しません。

この問題はしばらくの間私を悩ませてきましたが、適切な解決策が何であるかはよくわかりません. 私が言ったように、この問題は耳障りなほど一貫性がなく、IE10 でのみ発生し、Firefox ではめったに発生しません。どんな助けでも大歓迎です！前もって感謝します！

4

0 に答える 0