固定尺寸的顯示圖像div

Question

我有一個100 * 100的<div>，我想隨意顯示不同尺寸的圖像，而不用拉伸它們。

注：圖片應顯示爲原始，只是調整應該序做它放在盒子

Answer 1

也許這種風格將幫助您：

div { 
    position:relative; 
} 

div img { 
    max-width:100%;max-height:100%; 
} 

Answer 2

這裏有一個簡單的函數來計算您的方面比例和大小圖像下來。它需要文件的路徑和圖像的原始寬度和高度。你可以提供所有你認爲合適的東西。 'myElement'將是您的圖片元素的ID。

function loadImage(filename, width, height) { 

    var aspect = width/height; 
    var w, h; 

    if (width > height) { 
     w = 100; 
     h = Math.round(100/aspect); 
    } 
    else { 
     h = 100; 
     w = Math.round(100 * aspect); 
    } 

    var element = document.getElementById('myElement'); 
    element.src = filename; 
    element.style.width = w + 'px'; 
    element.style.height = h + 'px'; 
}