1

以下のコードは、画像のサイズを160x160に変更し、FirefoxとChromeでは正常に機能しますが、InternetExplorerでは機能しません。なんで？

$(document).ready(function() {
    $('#imagePreview img').each(function() {
        $('#imagePreview img').each(function() {
            var maxWidth = 160;             // Max width for the image
            var maxHeight = 160;            // Max height for the image
            var ratio = 0;                  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height

            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   
                $(this).css("width", maxWidth);         // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;                // Reset height to match scaled image
                width = width * ratio;                  // Reset width to match scaled image
            }

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; 
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
            }
        }); 
    });
});
4

1 に答える 1

4

画像が読み込まれるのを待っているわけではないため、サイズが保証されていません (キャッシュされているかどうかによって異なります)。

交換する必要があります

$(document).ready(function() {

と

$(document).load(function() {

そうは言っても、全体をこのスタイルに置き換えることができるようです：

#imagePreview img {
   max-width: 160px;
   max-height: 160px;
}

(デモンストレーションを参照)

于 2013-02-26T07:27:46.990 に答える