调整高度和宽度的百分比而不是像素

Question

我正在使用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;">

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

请参阅上面有关jsFiddle的操作

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

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

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

调整高度和宽度的百分比而不是像素

问题描述

1 个解决方案

解决方案1
25 已采纳 2011-05-26 06:58:05

调整高度和宽度的百分比而不是像素

问题描述

1 个解决方案

解决方案1 25 已采纳 2011-05-26 06:58:05

解决方案1
25 已采纳 2011-05-26 06:58:05