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

Question

I am using jQuery plugin for resizing the elements. 我正在使用jQuery插件来调整元素大小。 Elements height & width is set in percentage (%) not in pixel. 元素高度和宽度以百分比（％）设置，而不是以像素为单位。 Whenever i re-size any element it's height & width changes to pixels which is fixed but i wanted this change in percentage. 每当我重新调整任何元素的大小时，它的高度和宽度都会更改为固定的像素，但我想要这个百分比的变化。

I am sure there must be some technical issue for this but there would be solution too. 我确信必须有一些技术问题，但也会有解决方案。

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

But once i re-size id=image1, below is HTML code. 但是一旦我重新调整id = image1的大小，下面就是HTML代码。 it contains the height & width size in pixels. 它包含高度和宽度大小（以像素为单位）。 Does anybody light on it, How can i manage to re-size in percentage only. 有没有人点亮它，我怎么能设法只按百分比重新调整大小。

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

Answer 1

jQuery gets its values from the browsers DOM engine, which always return normalized values in pixels no matter how they were intially set. jQuery从浏览器DOM引擎获取其值，无论它们是如何初始设置的，它总是以像素为单位返回标准化值。

So the only way you will be able to do this is by recalculating the percentages based on elements width/height and parents width/height once the resizing has stopped. 因此，只有在调整大小停止后，才能通过重新计算基于元素宽度/高度和父级宽度/高度的百分比来实现此目的。

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

See the above in action on jsFiddle 请参阅上面有关jsFiddle的操作

Notice how I'm setting the width/height with .css instead of using .width and .height . 注意我是如何使用.css设置宽度/高度而不是使用.width和.height 。 This is because the latter will be normalized by the DOM engine and turned into pixels. 这是因为后者将由DOM引擎规范化并变为像素。

Now to some feedback on your code. 现在对您的代码提供一些反馈。 It's quite a mess to be honest. 说实话，这真是一团糟。 It's a really bad practice to use inline styling and scripts. 使用内联样式和脚本是一种非常糟糕的做法。 Set the width/height of #parentDiv with css just as you did with .image . 使用css设置#parentDiv的宽度/高度，就像使用.image 。 And don't use onmouseover attribute. 并且不要使用onmouseover属性。 Instead bind the event with jQuery using .bind . 而是使用.bind将事件与jQuery绑定。

Also you shouldn't make the elements resizable on mouse over. 此外，您不应该在鼠标悬停时使元素可调整大小。 It should be done once, when the document is ready. 文档准备好后，应该完成一次。 Use the autoHide option to hide the handlers while the mouse isn't over the element. 当鼠标悬停在元素上时，使用autoHide选项隐藏处理程序。 An alternative is to bind enable and disable methods to mouse hover, but that will not have the same result. 另一种方法是将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