Javascript 是否将div的大小调整为小于其声明的大小？

有没有办法将div的大小调整为小于声明的高度和宽度

我正在制作一个应用程序，用户可以在其中调整div的大小并保存它。但是，当我稍后加载它并将其设置为用户上次设置的大小时，它们可以使div变大，但不能变小

这是一个示例div：

.cls {
  border: solid 1px;
  width: 100px;
  height: 100px;
  resize: both;
  overflow: auto;   
}​

---

具有相同的问题，但使用GWT，似乎没有一个好的解决方案。

在javascript中，使用jquery：

//get the current heigt and the width of the element
var h = $('.cls').height();
var w = $('.cls').width();
// i don'T know how you provide your nes size, but once you have in i a variable, you can just do
if(your_h > h) $('.cls').height(your_h);
if(your_w > w) $('.cls').width(your_w);

假设您的尺寸以像素为单位

如果未指定参数，则Height（）和width（）将返回px大小。如果您提供值，它们将设置高度和宽度。如果没有明确指定测量，默认情况下使用px

在第二部分，它只需检查新尺寸（您的_x）是否比原始尺寸大，如果是，它将调整其大小，如果不是，它将忽略

---

是的，jquery将超越您的css规范；）任何人，较大或较小的值

如果要使用CSS3 UI调整大小功能，则浏览器决定是否可以使其小于或大于声明的宽度或高度

用户代理可以将大小调整范围限制为合适的范围，例如在元素的原始格式化大小和足以包含所有元素内容的大小之间

例如，在Firefox中，您可以调整其大小，使其小于您声明的宽度或高度。

---

在使用chrome时，您无法解决问题。

您要求解决问题，或者至少想知道如何解决问题。我给你做了一个简单的解决方案，可能需要一些工作；请注意，这是一个解决方法，因此可能包含故障

$('.cls').css('height', 200);
$(".cls").mouseup( function(){
var height = $(".cls").height();
var width = $(".cls").width();
if(height>=200){
$('.cls').css('height', 200);
}
if(width>=100){
$('.cls').css('width', 100);  
}
var
newdimensions="newheight="+height+"&"+"newwidth="+width;
});

.cls {
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    border: 1px dotted #000;
}

.cls:hover {
    width: 1px;
    height: 1px;
}

​ 更新小提琴：

• 请注意，Chrome和Safari可能会在将来的版本中更改CSS3的调整大小功能

---

我只想对Pfft在接受的答案中所说的做一点修改
如果使用：active伪类而不是：hover，则当您将鼠标悬停在元素上时，它不会闪烁。那种闪烁真的很烦人

div:active {
  width: 0;
  height: 0;
}

通过使用：active，当单击元素时，会将其大小调整为高度：0，宽度：0，因此会在1px边框处显示一个小点，但一旦用户开始调整大小，您就可以准确地获得调整大小所需的大小。在随后的每一次调整中，都没有任何小故障，只是工作得非常完美
我发现这比使用悬停要轻松得多。多亏了Pfft的上述回应，这正是我所寻找的，并引导我找到了自己的稍加修改的解决方案

---

这里有一个jsfiddle:
或者您可以使用jqueryui创建一个可调整大小的窗口
在尝试将jQueryUI可调整大小的小部件与滚动溢出的div一起使用时，我解决了一些问题。问题在于，调整大小手柄位于滚动条内部
为了解决这个问题，我制作了三个相互嵌套的div
第一个是包装器，用于设置div的起始大小
第二个用于句柄，其大小应设置为其父div（包装器div）的100%。您必须调整z索引以将它们定位到最终滚动条的任意位置
第二个div还应该包含draggable handle div和window div，您的所有windows内容都将位于其中
可拖动句柄div（.draggable）和窗口div（.window）都需要相对定位。这样它们就可以正确地相互定位，这样可拖动的手柄就不会位于滚动条的顶部
与以前的div一样，.window div应该缩放到父div的100%。这一个将有一个滚动溢出。现在，因为这等于100%句柄div，所以当您使用jqueryui调整句柄div的大小时，它也将调整这个div的大小
将可拖动div设置为100%的宽度和所需的任何高度，但任何增加的高度都会将窗口div推到比把手div更低的位置，并且需要在把手div上添加等量的底部填充来解决此问题。您还需要将handles div overflow设置为visible
在所有这些之后，在不同的元素中添加任何你想要的样式，你应该是好的。这很难解释，但我希望这是有道理的。所有的代码都在下面，希望它能比我的漫无边际更好地解释。这肯定会让你调整窗口的大小更小，移动div，如果你想要的话，你的div也会有一个滚动溢出
HTML
jQuery和jQuery UI最好将minHeight和minWidth选项与可调整大小的小部件一起使用，否则您的窗口将能够调整到几乎为零的大小，并可能导致一些恼人的副作用，例如使div太小，以至于需要重新加载页面以单击调整大小的手柄。在我看来，它看起来更专业
对于draggable小部件，您可以将要移动的整个div的包装器作为目标，然后给它一个我们在windowdiv中放置的draggable div的句柄

/*global $, jQuery, alert*/
$(document).ready(function () {
    'use strict';
    $('.handles').resizable({minHeight: 100, minWidth: 100});
    $('.winWrap').draggable({handle: '.draggable'});
});

---

这不会使项目在设置宽度/高度后可调整大小。另外，我没有使用php或mysql。你说要保存它，这就是为什么我回答要将它存储在数据库中，因为没有数据库就不可能保存它。你说保持div宽度/高度小于声明的高度和宽度。您在css和javascript中声明了200px的高度和100px的宽度。我编辑了我的javascript，并补充说用户不能更改分别大于200px和100px的高度和宽度。用户不能更改超过声明的高度和宽度的高度和宽度。但是用户可以将其大小调整为小于声明的高度和宽度。谢谢，但这不允许将项目大小调整为小于其设置的尺寸。重新加载后如何设置其大小？是设置元素的宽度/高度属性，还是设置元素的

.winWrap {
    position: relative;
    width: 500px;
    height: 500px;
}
.draggable {
    position: relative;
    width: 100%;
    height: 20px;
    box-shadow: inset 0px 0px 6px rgba(0,0,0,0.9);
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    z-index: 1;
}
.draggable p {
    padding: 2px;
    margin: 0px;
    cursor: default;
}
.handles {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    overflow: visible;
    box-shadow: 20px 15px 20px rgba(0,0,0,0.4);
    z-index: 1;
}
.window {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: scroll;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.7);
}
.windowContent{
    position: absolute;
}

/*global $, jQuery, alert*/
$(document).ready(function () {
    'use strict';
    $('.handles').resizable({minHeight: 100, minWidth: 100});
    $('.winWrap').draggable({handle: '.draggable'});
});