Как установить высоту div на фиксированную ширину div

Question

Я кодирую сайт, где у меня есть фиксированная ширина div, которая представляет собой фоторамку. Пользователь может изменять значения ширины и высоты для фрейма и использовать JQuery, я хотел бы показать им представление кадра.

Ширина рамки div сама по себе фиксирована, так как в дизайне страницы есть ограниченное пространство. Таким образом, единственный размер, который может физически измениться, - это высота.

Если пользователь указал ширину рамки 300 мм, например, и высоту 200 мм, я должен представить это на экране. То, с чем я борюсь, - это точное представление. В настоящее время я делаю следующее:

$(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, но любая помощь будет оценена!

Спасибо!

Answer 1

Я думаю, что у вас есть проблема с математикой.

Вы сказали, что ваш 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());}); 
});