如何在固定宽度的 div 上设置 div 高度答案

【问题标题】：How to set div height on a fixed width div如何在固定宽度的 div 上设置 div 高度
【发布时间】：2013-09-24 20:07:55
【问题描述】：

我正在编写一个网站，其中我有一个固定宽度的 div，它代表一个相框。用户可以更改框架的宽度和高度值，并且使用 Jquery，我想向他们展示框架的表示。

frame 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 更多的是数学，但我们将不胜感激！

谢谢！

【问题讨论】：

为什么你的jquery中有
标签？
我删除了<br> 标签，因为我认为它们只是为了在此处发布代码。
Kasper，没有——我只是把它们放进去，这样它就会在 StackOverflow 的屏幕上格式化。谢谢'anOG'
您的问题到底是什么？如何只获得integer-values？这是不可能的，因为除法有时会导致浮点数。
如果您需要整数值，请使用 Math.ceil() 或 Math.floor()

标签： jquery css

【解决方案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());});
});

【讨论】：

感谢 avrahamcool，这正是我想要的！完美！