调整高度和宽度的百分比，而不是像素
调整高度和宽度的百分比，而不是像素
提问于 2011-05-26 14:48:28
我使用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;">回答 1
Stack Overflow用户
回答已采纳
发布于 2011-05-26 14:58:06
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方法绑定到鼠标悬停，但这将不会有相同的结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6134746
复制相关文章
相似问题