Question

我正在使用jQuery插件来调整元素大小。元素高度＆amp; width的百分比（％）不是以像素为单位。每当我重新调整任何元素的大小时，它的高度和高度都会增加。宽度更改为固定的像素，但我想要这个百分比的变化。

我确信必须有一些技术问题，但也会有解决方案。

#parentDiv { height:100%; width:100%;}

.image { height: 25%; width: 25%; }  

<body>
<div id = "parentDiv">
    <div class="image" id="image1" onmouseover="resizeMe(this);"> </div>
    <div class="image" id="image2" onmouseover="resizeMe(this);"> </div>
</div>  

<script> 
  function resizeMe(obj) {
        $(#obj.id).resizable();  }

</body>

但是一旦我重新调整id = image1的大小，下面就是HTML代码。它包含高度和高度宽度大小（像素）。有没有人点亮它，我怎么能设法只按百分比重新调整大小。

<div class="image" style="width: 345px; height: 52px;">

Answer 1

jQuery从浏览器DOM引擎获取其值，无论它们是如何设置的，它总是以像素为单位返回标准化值。

因此，您可以这样做的唯一方法是在调整大小停止后，根据元素宽度/高度和父级宽度/高度重新计算百分比。

$(".image").resizable({
    autoHide: true,
    stop: function(e, ui) {
        var parent = ui.element.parent();
        ui.element.css({
            width: ui.element.width()/parent.width()*100+"%",
            height: ui.element.height()/parent.height()*100+"%"
        });
    }
});

请参阅上面的in action on jsFiddle

注意我是如何使用.css设置宽度/高度，而不是使用.width和.height。这是因为后者将由DOM引擎规范化并变为像素。

现在就您的代码提供一些反馈。说实话，这真是一团糟。使用内联样式和脚本是一种非常糟糕的做法。使用css设置#parentDiv的宽度/高度，就像使用.image一样。并且不要使用onmouseover属性。而是使用.bind将事件与jQuery绑定。

此外，您不应该在鼠标悬停时使元素可调整大小。文档准备好后，应该完成一次。当鼠标悬停在元素上时，使用autoHide选项隐藏处理程序。另一种方法是将enable和disable方法绑定到鼠标悬停，但这不会产生相同的结果。

调整高度＆amp;宽度百分比而非像素

1 个答案: