使用动态框架调整图像大小答案

【问题标题】：Image resizing with dynamic frame使用动态框架调整图像大小
【发布时间】：2013-10-31 10:48:31
【问题描述】：

我完全陷入困境，我需要帮助。我一直在尝试创建一个图片框架实用程序（用于照片等）。用户可以在其中指定照片的尺寸，然后选择彩色纸板支架和框架类型来绕过它。我的客户选择让我创建类似的网站是：http://www.ezeframe.co.uk/picture-frames

您可以看到用户可以指定他们的图片尺寸、框架和安装，并在屏幕上看到它正在成形。我遇到困难的地方是缩放。您可以在上面的示例中看到，如果有人更改了他们的安装尺寸或帧类型，他们会发生变化，以便它们与图片尺寸成比例。我一直试图让我的系统做同样的事情，但我失败了！

到目前为止，我所做的（没有缩放）可以在此处的客户现场网站上看到：www.vivarti.co.uk/bespoke-frames

我主要使用 CSS、Jquery 和 AJAX 来完成它。

有没有比使用 Jquery 更好的方法来做这种事情，或者任何人都可以帮助我计算出数学以使我的版本扩展吗？我知道这是一项艰巨的任务，但我只是希望有人能帮助我！

提前致谢。

【问题讨论】：

标签： php jquery css ajax

【解决方案1】：

或使用 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 设置最大/最小宽度

【讨论】：

谢谢，但不幸的是，我认为在这种情况下不起作用。框架都是特定宽度，用户也可以指定特定的安装宽度。
谁能帮忙？？请问？
在我的情况下，为了更新图像的大小，我只需要使用 javascript 修改 id = 'div_container' 的 div 的大小：
例如document.getElementById('div_container').style.height = heigth + "px";
您好，乌尔里希，感谢您的评论。有没有什么地方可以看到你的脚本在运行，所以我可以看看它是否做了类似于我需要的事情？

【解决方案2】：

试试这个

<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>

【讨论】：