如何解决调整大小的高度和宽度不是像素
| 我正在使用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;\">
解决方法
jQuery从浏览器DOM引擎获取其值,该浏览器始终以像素为单位返回归一化的值,而不管它们的初始设置如何。
因此,您唯一能够做到这一点的方法是,一旦调整大小停止,就根据元素的width / height和父元素的width / height重新计算百分比。
$(\".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绑定。
同样,您不应该在鼠标悬停时调整元素的大小。文件准备好后,应该只做一次。当鼠标不在元素上时,使用ѭ10选项隐藏处理程序。另一种方法是将enable
和disable
方法绑定到鼠标悬停,但是结果不会相同。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。