Как я могу использовать CSS `resize` для изменения размера элемента на высоту/ширину меньше начальной высоты/ширины в Chrome?

Я только что видел, что на Chromium

Я не могу изменить размер элемента на высоту, меньшую, чем его начальная высота, в случае resize:vertical или resize:both
Я не могу изменить размер элемента до ширины меньше его начальной ширины в случае resize:horizontal или resize:both.

Я прочитал w3c spec, и я думаю, проблема возникает из-за этого:

Пользовательский агент может ограничивать диапазон изменения размеров чем-то подходящим, например, между оригинальным отформатированным размером элемента и большим достаточно, чтобы охватить все содержимое элемента.

Есть ли способ сделать это, даже если Chrome применяет абзац выше?

Примечание: я использую Chromium 30.0.1592.0 (216775)

Ответ 1

Я собираюсь сказать no (t без javascript).

Пользовательский CSS, позволяющий изменять размер хрома textarea меньше, чем начальное состояние?

Тот факт, что вы не можете изменять размер текстового поля под его начальными параметрами, сообщается как ошибка (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", или высота с шириной не исправлена, конечно, отрегулируйте ее после ваших потребностей.

Ответ 4

Как добавить минимальную высоту/максимальную высоту?

Это позволяет установить его за начальную.

http://jsfiddle.net/Dqxua/

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