預緊和調整圖像大小的jQuery/JavaScript的

在我的實際使用Javascript，我預先加載一些圖片和我的index.html的身體顯示它們。我需要一種方法來調整它們的大小以便顯示窗口的寬度和高度。這裏是我的實際代碼：預緊和調整圖像大小的jQuery/JavaScript的

function($) { 
    $.preLoadImages = function() { 
     var args_len = arguments.length; 
     for (var i = args_len; i--;) { 
      var cacheImage = document.createElement('img'); 
      cacheImage.src = arguments[i]; 
      arrayimg.push(cacheImage); 
     } 
     arrayimg.reverse(); 
    } 
})(jQuery) 

function resizing(img) { 

    var $image = img; 
    var image_width = $image.width; 
    var image_height = $image.height; 
    var body_width = $("#corps").width(); 
    var body_height = $("#corps").height(); 
    $image.width = body_width; 
    $image.height = body_height; 

} 

$.preLoadImages("./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/p1.jpg", "./images/p2.jpg", "./images/p3.jpg"); 
for (j = 0; j < arrayimg.length; j++) { 
    resizing(arrayimg[j]); 
}

這段代碼實際上工作得很好。主要問題是調整大小不能保持實際圖像的方面。我需要一些尊重最初圖像寬高比的代碼。

來源

2013-11-25 W.H.

你需要調整圖像在JavaScript？它可以在CSS中完成嗎？你可以保持寬高比容易這樣。 –

嗯，honnest，我需要我的預加載圖片到我的javascript，所以我不知道你怎麼可以用CSS在HTML例如容易調整它們的大小沒有。 –

在功能「調整大小」，您存儲「IMAGE_WIDTH」和「IMAGE_HEIGHT」，但從來沒有使用它。顯然你可以從這兩個變量中獲得比例。並根據您的要求，適合高度或寬度，並用計算出的比例調整其他變量。 –

可以計算這樣的比例：

var ratio = Math.min(body_width/image_width, body_height/image_height);

然後，只需乘：

$image.width = ratio*body_width; 
$image.height = ratio*body_height;

我以爲你要「適合」身體內的圖像。如果你要裁剪，替換Math.min與Math.max（並添加溢出：隱藏等）

來源

2013-11-25 16:00:01 David

@ W.H。您只應該這樣做一次，因爲當您更改寬度/高度屬性時，計算會變形。如果您需要進行多次計算，請將它們保存爲數據屬性。 – David

好吧，我現在得到它大衛。感謝@StuartMiller的幫助。 –

預緊和調整圖像大小的jQuery/JavaScript的

回答

相關問題