如何提升CSS resize属性的尺寸调整速率？

不行，CSS原生的resize属性没有提供调整缩放速率的参数——它只能控制元素是否可缩放、以及允许缩放的方向（both/horizontal/vertical），完全没法自定义拖拽时的尺寸变化快慢。如果想要调整缩放速率，必须通过JavaScript脚本实现。

简单的自定义缩放速率实现示例 #

下面是一个手动实现可缩放元素并控制速率的方案：

HTML结构

<div class="resizable">
  <div class="resize-handle"></div>
</div>

基础CSS样式

.resizable {
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  background: #f5f5f5;
  position: relative;
}

.resize-handle {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 15px;
  height: 15px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  cursor: se-resize;
}

JavaScript控制逻辑

const resizable = document.querySelector('.resizable');
const resizeHandle = resizable.querySelector('.resize-handle');
let isResizing = false;
let startX, startY, startWidth, startHeight;
// 自定义缩放速率：鼠标每移动1px，元素尺寸变化2px（数值越大缩放越快）
const scaleRate = 2;

resizeHandle.addEventListener('mousedown', (e) => {
  isResizing = true;
  // 记录初始状态
  startX = e.clientX;
  startY = e.clientY;
  startWidth = parseInt(getComputedStyle(resizable).width);
  startHeight = parseInt(getComputedStyle(resizable).height);
  // 禁用页面文本选中，避免拖拽时干扰
  document.body.style.userSelect = 'none';
});

document.addEventListener('mousemove', (e) => {
  if (!isResizing) return;
  // 计算鼠标移动的距离
  const deltaX = e.clientX - startX;
  const deltaY = e.clientY - startY;
  // 应用自定义速率更新尺寸
  resizable.style.width = `${startWidth + deltaX * scaleRate}px`;
  resizable.style.height = `${startHeight + deltaY * scaleRate}px`;
});

document.addEventListener('mouseup', () => {
  isResizing = false;
  document.body.style.userSelect = '';
});

这个方案通过监听鼠标的拖拽事件，手动计算尺寸变化量并乘以自定义的速率系数，就能完全掌控缩放的快慢，比原生resize更灵活。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams