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

【问题标题】：How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?如何使用 CSS `resize` 将元素的高度/宽度调整为小于 Chrome 上的初始高度/宽度？
【发布时间】：2013-08-13 06:02:23
【问题描述】：

我刚刚在 Chromium 上看到了这个

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

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

我看过w3c spec，我猜问题是因为这个：

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

有没有办法做到这一点，即使 Chrome 应用了上面的段落？

注意：我使用 Chromium 30.0.1592.0 (216775)

【问题讨论】：

+1 for the Q 我不敢相信我正在阅读这个问题......到底什么时候，什么时候浏览器最终会握手？我需要再来一杯咖啡。 担心>
这个问题有解决办法：stackoverflow.com/questions/15146449

标签： css google-chrome resize

【解决方案1】：

我会说不（没有 javascript）。

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

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

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

当你第一次点击时，元素的原始大小会变小，但由于你仍然按住按钮 - 它会立即恢复它的大小，然后你可以轻松地改变你想要的大小。

“50px”，或者说高度和宽度当然不是固定的，根据你的需要进行调整。

【讨论】：

试过了，如果页面是可滚动的，它会将区域压缩到 50px 高，并且单击 textarea 中的任意位置会导致这种情况发生。所以不是一个适合我的解决方案。
您可以添加一个计数，只有第一次单击才会使其变为 50x50，之后此功能将停止工作。您可以单击并键入。不是最漂亮的解决方案，而是简短的。

【解决方案4】：

添加一个最小高度/最大高度怎么样？

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

http://jsfiddle.net/Dqxua/

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

【讨论】：