[英]How to set div height on a fixed width div
我正在编码一个具有固定宽度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);
});
});
问题是,导致newDivHeight为133.33,我知道这是不对的。 谁能帮我解决这个问题? 我敢肯定,数学比Jquery更重要,但是任何帮助将不胜感激!
谢谢!
我认为您数学上有问题。
您说您的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());});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.