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

Question

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

0

Я кодирую сайт, где у меня есть фиксированная ширина 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);
  });
});

Проблема в том, что в результате получается новый DivHeight 133.33, который, как я знаю, неверен. Может ли кто-нибудь помочь мне разобраться с этим? Я уверен, что это математика более JQuery, но любая помощь будет оценена!

Благодарю!

willothewisp 24 сен. 2013, в 13:11

Источник

Теги:

jquery

css

1 ответ

Ещё вопросы

avrahamcool · Accepted Answer · 2013-09-24T09-04-00.000Z

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

вы сказали, что ваш 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, это именно то, что я искал! Отлично!