以百分比而非像素调整高度和宽度的大小

Question

以百分比而非像素调整高度和宽度的大小

17

我正在使用jQuery插件调整元素大小，元素的高度和宽度以百分比（%）而不是像素为单位设置。每当我重新调整任何元素时，它的高度和宽度会变成固定的像素，但我希望这种变化以百分比的方式呈现。

我相信这里肯定存在一些技术问题，但也有解决方案。

#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;">

- user575363

首先，$("#"+obj.id).resizable()。 - Ibu

哦，对不起，我忘记写了。我的愚蠢错误 :( - user575363

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mekwall · Accepted Answer

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+"%"
        });
    }
});

请查看上面的jsFiddle演示

注意我是如何使用.css来设置宽度/高度，而不是使用.width和.height。这是因为后者会被DOM引擎标准化并转换为像素。

现在来反馈一下你的代码。老实说，它很混乱。使用内联样式和脚本是非常糟糕的做法。像你对.image所做的那样，使用CSS来设置#parentDiv的宽度/高度。不要使用onmouseover属性。而是使用.bind将事件绑定到jQuery上。

另外，你不应该让元素在鼠标悬停时可调整大小。应该在文档准备好时完成。使用autoHide选项可以在鼠标未悬停在元素上时隐藏处理程序。另一种选择是将enable和disable方法绑定到鼠标悬停，但那不会产生同样的效果。