使用动态帧调整图像大小

时间:2013-10-31 10:48:31

标签: php jquery css ajax

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

您可以看到用户可以指定其图片大小,框架和装载,并在屏幕上看到它的形状。我脱颖而出的是缩放。您可以在上面的示例中看到,如果某人更改了其装载大小或帧类型,则会更改它们以使它们与图片大小成比例。 我一直试图让我的系统做同样的事情而且我失败了!

到目前为止我所做的事情(没有缩放)可以在客户的实时网站上看到:www.vivarti.co.uk/bespoke-frames

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

有没有比使用Jquery更好的方法来做这种事情,或者任何人都可以帮助我计算数学以使我的版本规模化?我知道一个很高的命令,但我只是希望有人可以帮助我!

提前致谢。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

试试这个

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