0

みなさんこんばんは！！

画像のサイズ変更とJavascriptでいくつかの問題に直面しています。

アスペクト比を維持しながら画像のサイズを変更する関数を作成しました。関数は次のとおりです。

function computeRatio () {

        var el_image = document.getElementById("div_image");

        var newImg = new Image();           
        newImg.src = document.getElementById("image").src;

// GET IMAGE REAL DIMENSIONS

        var image_height = newImg.height;
        var image_width = newImg.width;

// SET WINDOW DIMENSIONS

        var window_height = 762;
        var window_width  = 600;

// COMPUTE DIMENSION RATIOS

        var height_ratio  = image_height / window_height;
        var width_ratio   = image_width / window_width;

// RESET IMAGE POSITION

        el_image.style.left = "0px";
        el_image.style.top = "0px";

        if (height_ratio > width_ratio) {
            var width = window_height/(image_height/image_width);

// SET NEW DIMENSIONS (MAX HEIGHT & NEW WIDTH)

            el_image.style.width  = width+"px";
            el_image.style.height = window_height+"px"

// SET NEW POSITION TO CENTER IMAGE

            var scroll_x = (window_width-width)/2;

            el_image.style.left = scroll_x+"px";

        } else {
            var height = window_width*(image_height/image_width);


// SET NEW DIMENSIONS (MAX WIDTH & NEW HEIGHT)

            el_image.style.width  = window_width+"px"
            el_image.style.height = height+"px";

            var scroll_y = (window_height-height)/2;

            el_image.style.top = scroll_y+"px";
        }

}

これは、HTMLの関連部分です。

<div id="div_image" style="display: block;">
    <img src="" alt="0" id="image" onLoad="computeRatio ()"/>
</div>

それほど小さくない画像（つまり、サイズ> 1MB）を処理する場合を除いて、これは非常にうまく機能します。

これが発生すると、関数は正しいサイズを計算しますが、画像は全画面表示（W = 600px、H = 762px）になり、明らかに中央に配置されません。

なんでこんなことが起こるのか本当にわからない!!

何か助けはありますか？

ありがとうございます

4

1 に答える 1

1

コンテナ内の画像のアスペクト比を維持するには、画像をに設定してdisplay:blockを追加するだけwidth:100%です。その効果は、画像が含まれている要素の幅まで塗りつぶされ、高さが自動的に調整されることです。

#image {
    display:block;
    width:100%;
}
于 2012-09-01T00:01:50.130 に答える