縮小圖像以適合div

Question

我正在嘗試按比例縮小一個裝料，以適合大於最大寬度和高度設置的div容器。 我下面的代碼獲取圖像的寬度和高度以及允許的最大尺寸設置。

這是我無法進入的深度，它在下面加載的圖像為662x599。 寬度大於允許的最大值，因此我需要將其正確縮小並放置在div的中心。

var max_width = 713;
var max_height = 550;

var img = new Image();
img.onload = function() {
    img.width = this.width;
    img.height = this.height;
}
img.src = 'files.jpg';

以下是我手動調整圖像大小的示例，它看起來不錯，可以為您提供一個粗糙的外觀示例。 我打算使用樣式“ top”和“ left”將圖像放置在div的中心。

<img style="width: 613px; height: 550px; top: 0px; left: 50px;" src="files.jpg">

任何幫助將非常感謝。

Answer 1

這是用於計算width ， height ， top ， left 。

// max_width  = 713
// max_height = 550
// img.width  = 662
// img.height = 599

scale_width = max_width / img.width;
scale_height = max_height / img.height;

scale = Math.min(scale_width, scale_height);

width = img.width * scale;  // 608
height = img.height * scale;  // 550

left = (max_width - width)/2; // 52
top = (max_height - height)/2;  // 0

Answer 2

為什么甚至需要JavaScript？ 只需將圖像上的max-width設置為與包含div的max-width （即100％）匹配即可。

http://jsfiddle.net/Pp7Rg/1/

<div>
    <img src="https://www.google.com/url?q=http://www.photoinpixel.com/mypicture/persian-cat-hd-wallpaper.jpg&ei=dTWZUYHKOoqkiQLto4GYAw&sa=X&oi=unauthorizedredirect&ct=targetlink&ust=1368996989961871&usg=AFQjCNHdsjijJ2oeKrUuvZRMFUuIRxydtg"/>
</div>

div {
    width: 500px;
}

img {
    max-width: 100%;
}