Question

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

框架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);
  });
});

问题是，导致新的DivHeight为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());});
});

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

1 个答案: