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

I have just seen that on Chromium

我刚看到Chromium

I can't resize an element to a height smaller than its initial height in case of resize:vertical or resize:both

在调整大小的情况下,我无法将元素的大小调整为小于其初始高度的高度:vertical或resize:both

I can't resize an element to a width smaller than its initial width in case of resize:horizontal or resize:both.

在调整大小的情况下,我无法将元素的大小调整为小于其初始宽度的宽度:水平或调整大小:两者。

Demo: http://jsfiddle.net/3rdj4/3

I have read w3c spec, and I guess the problem comes because of this:

我已经阅读了w3c规范,我想这个问题是因为:

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

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

Is there a way to do it, even if Chrome applies the paragraph above?

有没有办法做到这一点,即使Chrome应用上面的段落?

Note: I use Chromium 30.0.1592.0 (216775)

注意:我使用的是Chromium 30.0.1592.0(216775)

4 个解决方案

#1

I'm gonna say no(t without javascript).

我会说不(没有javascript)。

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

自定义CSS允许chrome textarea调整大小小于初始状态?

The fact you cannot resize a textarea under its initial dimensions is reported as a bug (https://code.google.com/p/chromium/issues/detail?id=94583)

您无法在初始尺寸下调整文本区域大小的事实被报告为错误(https://code.google.com/p/chromium/issues/detail?id=94583)

#2

A Javascript solution:

一个Javascript解决方案:

Demo: 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;
}

The solution above uses mouseover and mouseout to trigger resizableStart and resizableEnd. The problem is that if the element being resized has childs, when the mouse is placed over a child, the element receives a mouseout event and, just after that, it receives a mouserover event which bubbles from child.

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

To avoid those events I have implemented another solution with mouseenter and mouseleave events:

为了避免这些事件,我使用了mouseenter和mouseleave事件实现了另一个解决方案:

Demo: http://jsfiddle.net/nz8ut/3/

#3

A very simply solution here (can be rewritten in pure javascript):

这里有一个非常简单的解决方案(可以用纯JavaScript重写):

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

When you first click, the original size of element will be changed to smaller one, but since you still hold the button - it will restore its size immidiately, and then you can easy change the size however you want.

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

The '50px', or height with width isn't fixed of course, adjust it after your needs.

“50px”或宽度高度当然不固定,请根据需要调整。

#4

-3

How about adding a min-height/max-height?

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

This allows it to be set beyond the initial.

这允许它超出最初设置。

http://jsfiddle.net/Dqxua/

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

#1