Question

我有一个包含两个可调整大小div的页面。第一个正常工作，第二个显示调整大小图标，但没有调整大小。

这是我的HTML：

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="css/jquery-ui-1.10.4.css">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery-ui-1.10.4.js"></script>
    </head>
    <body>
        <div id="page">
            <img id="img_site_top" src="site_top.png">
            <div id="img_header" style="position: absolute; left: 7px; top: 7px; background-image: url(header.png); width:980px; height:106px;">
                <a id="img_logo" class="jqDrag" style="position:absolute; top: -11px; left: 0px; width:350px; height:107px; background-image: url(logo.png); background-size: 100% 100%;background-repeat: no-repeat; border: 1px solid white">
                </a>
            </div>
            <img id="img_site" src="site.png">
            <img id="img_welcome_panel" src="welcome_panel.png">
        </div>
    </body>
    <script>
        $(
            function(){
                $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
                $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
            }
        );
    </script>
</html>

结果：

enter image description here

其中：

第一个调整大小应用于浅棕色框（$('#img_logo')）
第二个调整大小应用于淡蓝色框（$('#img_header')），尽管它似乎应用于灰色框。

Demo here

我错过了什么？为什么第一个盒子正常工作而第二个盒子没有？

Answer 1

尝试更改初始化顺序。演示：http://jsfiddle.net/GCu2D/77/。替换这个：

 $(function(){
            $('#img_logo').draggable().resizable({ aspectRatio: true }); //works
            $('#img_header').resizable(); //doesn't work: shows the icon, but doesn't resize.
  });

使用：

 $(function(){                
            $('#img_header').resizable();
            $('#img_logo').draggable().resizable({ aspectRatio: true });

   });

Answer 2

可能是因为绝对定位只是将其改为仅设置

position: relative;

Jquery resizable（）显示调整大小图标但没有调整大小

2 个答案: