如何在固定寬度div上設置div高度

我正在編碼一個網站，其中有一個代表相框的固定寬度div。用戶可以改變框架的寬度和高度值，並使用Jquery，我想向他們展示框架的表示。如何在固定寬度div上設置div高度

框架div的寬度本身是固定的，因爲在頁面設計中它的空間有限。所以唯一能夠改變身材的是身高。

如果用戶指定了例如300mm的框架寬度和200mm的高度，則必須在屏幕上表示該寬度。我正在努力的是獲得一個準確的表示。目前，我做了以下內容：

$(function() { 
    $("#artwork_height_input").change(function() { 
    //Work out the new proportional height (the width of the div is fixed, so only the height can be altered) 
    var divWidth = $("#artwork_width_input").val(); 
    var divHeight = $("#artwork_height_input").val(); 
    var ratio = divWidth/divHeight; 
    var newDivHeight = divHeight/ratio; 
    alert(newDivHeight); 
    $("#scaledimage").height(newDivHeight-2); 
    }); 
});

的問題是，導致newDivHeight的133.33，我知道是不對的。任何人都可以幫助我解決這個問題嗎？我敢肯定它的數學比Jquery更多，但任何幫助將不勝感激！

謝謝！

來源

2013-09-24 willothewisp

爲什麼在你的jQuery
標籤？ –

我刪除了'
'標籤，因爲我認爲它們只是爲了在此發佈代碼。 – George

Kasper，沒有 - 我只是把它們放入，以便在屏幕上在StackOverflow中格式化。謝謝'anOG' – willothewisp

我認爲你有一個數學問題。

你說你的div有一個固定的寬度，所以我們需要確定他的身高。

由用戶指定的框架有一定的比例，我們需要這個等式來保持。

DivHeiht/DivWidth = FrameHeight/FrameWidth

因此，DivHeight = DivWidth*(FrameHeight/Framewidth)

$(function() { 
    $("#artwork_height_input").change(function() { 
    //Work out the new proportional height (the width of the div is fixed, so only the height can be altered) 
    var Framewidth= $("#artwork_width_input").val(); 
    var FrameHeight= $("#artwork_height_input").val(); 
    var DivWidth = $("#scaledimage").width(); 
    var DivHeight = DivWidth*(FrameHeight/Framewidth); 
    //alert(DivHeight); 
    $("#scaledimage").height(DivHeight);//-2 for what? 
    }); 
});

或：較短的方式：（但較難理解）

$(function() { 
    $("#artwork_height_input").change(function() { 
    $("#scaledimage").height($("#scaledimage").width()*$("#artwork_width_input").val()/$("#artwork_height_input").val());}); 
});

來源

2013-09-24 12:01:50 avrahamcool

感謝avrahamcool，這就是我一直在尋找的！完善！ – willothewisp

如何在固定寬度div上設置div高度

回答

相關問題