Question

我刚刚在Chromium上看到了

如果resize:vertical或resize:both
如果resize:horizontal或resize:both，我无法将元素调整为小于其初始宽度的宽度。

演示：http://jsfiddle.net/3rdj4/3

我已阅读w3c spec，我猜问题就是因为：

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

有没有办法实现，即使Chrome应用了上面的段落？

注意：我使用的是Chromium 30.0.1592.0（216775）

Answer 1

我会说不（没有javascript）。

Custom CSS to allow chrome textarea resize smaller than initial state?

您无法在初始尺寸下调整textarea的大小报告为一个错误（https://code.google.com/p/chromium/issues/detail?id=94583）

Answer 2

Javascript解决方案：

演示：http://jsfiddle.net/nz8ut/2/

function resizableStart(e){
    this.originalW = this.clientWidth;
    this.originalH = this.clientHeight;
    this.onmousemove = resizableCheck;
    this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e){
    if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
        this.originalX = e.clientX;
        this.originalY = e.clientY;
        this.onmousemove = resizableMove;
    }
}
function resizableMove(e){
    var newW = this.originalW + e.clientX - this.originalX,
        newH = this.originalH + e.clientY - this.originalY;
    if(newW < this.originalW){
        this.style.width = newW + 'px';
    }
    if(newH < this.originalH){
        this.style.height = newH + 'px';
    }
}
function resizableEnd(){
    this.onmousemove = this.onmouseout = this.onmouseup = null;
}

var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
    els[i].onmouseover = resizableStart;
}

上述解决方案使用mouseover和mouseout来触发resizableStart和resizableEnd。问题是如果要调整大小的元素有子节点，当鼠标放在子节点上时，该元素会收到mouseout事件，然后，它会收到一个mouserover事件，该事件会从子节点冒出

为了避免这些事件，我使用mouseenter和mouseleave事件实施了另一个解决方案：

演示：http://jsfiddle.net/nz8ut/3/

Answer 3

这里有一个非常简单的解决方案（可以用纯JavaScript重写）：

$("element").mousedown(function() {
    $("element").css({height:'50px', width: '50px'});
});

当您第一次点击时，元素的原始大小将更改为较小的一个，但由于您仍然按住按钮 - 它将立即恢复其大小，然后您可以轻松地更改大小，无论您想要。

＆＃39; 50px＆＃39;或宽度高度当然不是固定的，请根据需要进行调整。

Answer 4

如何添加最小高度/最大高度？

这允许将其设置为超出初始值。

http://jsfiddle.net/Dqxua/

#wrapper {
    min-height:200px;
    max-height: 400px;
    resize: vertical;
    overflow: auto;
    border: 1px solid #000;
}

如何使用CSS`resize`在Chrome上将元素的大小调整为小于初始高度/宽度的高度/宽度？

4 个答案: