Javascript 以百分比而不是像素调整高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6134746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resizing height & width in percentage not pixel
提问by mekwall
I am using jQuery plugin for resizing the elements. 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.
我正在使用 jQuery 插件来调整元素的大小。元素的高度和宽度以百分比 (%) 而非像素为单位设置。每当我重新调整任何元素的大小时，它的高度和宽度都会更改为固定的像素，但我想要这种百分比变化。
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. it contains the height & width size in pixels. Does anybody light on it, How can i manage to re-size in percentage only.
但是一旦我重新调整 id=image1 的大小，下面是 HTML 代码。它包含以像素为单位的高度和宽度大小。有没有人对此有所了解，我如何才能仅按百分比重新调整大小。
<div class="image" style="width: 345px; height: 52px;">
回答by mekwall
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 .cssinstead of using .widthand .height. This is because the latter will be normalized by the DOM engine and turned into pixels.
请注意我是如何设置宽度/高度.css而不是使用.widthand 的.height。这是因为后者会被 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 #parentDivwith css just as you did with .image. And don't use onmouseoverattribute. Instead bind the event with jQuery using .bind.
现在对您的代码进行一些反馈。老实说，这真是一团糟。使用内联样式和脚本是一种非常糟糕的做法。#parentDiv像使用 .css 一样设置with css的宽度/高度.image。并且不要使用onmouseover属性。而是使用 jQuery 绑定事件.bind。
Also you shouldn't make the elements resizable on mouse over. It should be done once, when the document is ready. Use the autoHideoption to hide the handlers while the mouse isn't over the element. An alternative is to bind enableand disablemethods to mouse hover, but that will not have the same result.
此外，您不应该在鼠标悬停时调整元素的大小。当文档准备好时，它应该完成一次。autoHide当鼠标不在元素上时，使用该选项隐藏处理程序。另一种方法是绑定enable和disable鼠标悬停的方法，但这不会产生相同的结果。
