我完全陷入困境，我需要帮助。我一直在尝试创建一个图片框架实用程序（用于照片等）。用户可以指定照片的大小，然后选择彩色纸板支架和框架类型来绕过它。我的客户为我选择创建类似内容的网站是这样的：http://www.ezeframe.co.uk/picture-frames
您可以看到用户可以指定他们的图片尺寸、框架和支架，并在屏幕上看到它正在成形。我解开卡住的地方是缩放。您可以在上面的示例中看到，如果有人更改其安装尺寸或框架类型，它们会更改，以便与图片大小保持比例。我一直在尝试让我的系统做同样的事情，但我失败了！
到目前为止，我所做的（没有扩展）可以在客户端实时站点上看到：www.vivarti.co.uk/bespoke-frames
我主要使用CSS，Jquery和AJAX来完成。
有没有比使用 Jquery 更好的方法来做这种事情，或者谁能帮我计算数学来使我的版本缩放？我知道这是一项艰巨的任务，但我只是希望有人能帮助我！
提前谢谢。
或使用CSS
<body style="max-width: 90%; max-height: 90%">
<div id="div_container" style="background: #ff3300;max-width: 90%; max-height: 90%">
<img id="imgid" src="picture.jpg" style="max-width: 90%; max-height: 90%">
</div
</body>
您还可以使用 JavaScript 设置最大/最小宽度
试试这个
<html>
<head>
<script>
function setHeight(value) {
getTag('div_container').style.height = value + 'px';
}
function setWidth(value) {
getTag('div_container').style.width = value + 'px';
}
function getTag(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div>
<input type="text" value="200" onChange="setHeight(this.value);"
placeholder="height">
<input type="text" value="200" onChange="setWidth(this.value);"
placeholder="width">
</div>
<div id="div_container" style="background: #ff3300;width:200px;
height:200px;max-width: 90%; max-height: 90%">
<img id="imgid" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-sticker-proof.png"
style="min-width: 5%; min-height: 5%; max-width: 90%; max-height: 90%; margin: 5%;">
</div>
</body>