调整大小 | CSS-Tricks

resize 属性控制用户是否以及如何通过单击并拖动元素的右下角来调整元素的大小。

.module {
  resize: both;
}

非常重要的一点：除非 overflow 属性设置为除 visible 之外的任何值（对于大多数元素，其初始值为 visible），否则 resize 不会起作用。

还值得注意的是，Firefox 允许您将元素调整为小于其原始大小。Webkit 浏览器不允许您将元素调整为更小，只能更大（在两个维度上）。

值

none：元素不可调整大小。这是大多数元素的初始值。textarea 元素是最常见的例外——在许多浏览器中，它的默认 resize 值为 both。
both：用户可以调整元素的高度和/或宽度。
horizontal：用户可以水平调整元素大小（增加宽度）。
vertical：用户可以垂直调整元素大小（增加高度）。
inherit：元素继承其父元素的 resize 值。

当元素可调整大小时，它在右下角有一个小的 UI 手柄。当页面的 direction 设置为 ltr（从左到右）时，手柄出现在页面元素的右侧；当设置为 rtl（从右到左）时，手柄出现在左侧。

演示

此演示中可调整大小的元素是段落。单击按钮以尝试不同的 resize 值。

查看 CodePen 上由 CSS-Tricks (@css-tricks) 制作的调整大小演示。

浏览器支持

这些浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器在该版本及更高版本上支持该功能。

台式机

Chrome	Firefox	IE	Edge	Safari
4	4*	否	79	4

移动设备/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	否

Fernando

# 2013 年 2 月 20 日

嘿，哥们。非常感谢你分享的所有技巧。

Muchas gracias!

harpreet bhatia

# 2014 年 1 月 20 日

这也可以应用于 onresize 事件吗？

Mike C

评论永久链接# 2017 年 8 月 25 日

我知道这有点晚了，但 window 是 DOM 中唯一触发 onresize 事件的部分。

Josh Harrington

# 2014 年 10 月 1 日

嘿，Chris，

你一直是我所有 CSS 问题的首选资源，感谢多年来的帮助！

只想扩展一下你关于 Chrome 与 Firefox 之间差异的观点。我假设你可以在可调整大小的元素上指定一个最小宽度、一个宽度和一个最大宽度，默认宽度将采用加载宽度。然后用户应该能够在最小宽度和最大宽度之间更改宽度。在 Firefox 中似乎就是这样，但在 Chrome 中却并非如此。

有什么想法吗？Chrome 可能会改变实现方式以在 Chrome 中也实现 Firefox 的行为吗？

谢谢，
Josh

channu yatnur

# 2015 年 1 月 29 日

嗨，
css resize:both 对于 iframe 在 IE 和 firefox 中不起作用，但在 chrome 中运行良好……请给我一些建议。

Adam Taylor

# 2015 年 7 月 30 日

可能值得补充的是，可以使用 max-width 和 max-height 来限制元素可以调整的大小。例如，可以阻止它变得太大而超出其父元素。

Laurens Maneschijn

# 2017 年 7 月 19 日

回复晚了，但也许对某些人仍然有帮助。

我发现 webkit 限制无法缩小元素非常令人沮丧，我发现添加 :active{ width:0; height: 0; } 有所帮助。

推荐

添加 width、height 以获得合理的大小。
添加 min-width、min-height 以获得合理的最小大小，这样你就不会得到一个难以再次放大的 0x0 框。
添加 max-width、max-height 以获得合理的最大大小，这样你就不会将角拖出窗口。

笔记

我不太确定这是如何起作用的。
这似乎是一个技巧，而且可能明智的做法是在生产网站上不要依赖它。
它似乎适用于将最小大小限制为初始大小的浏览器（WebKit 例如 Chrome）。
它具有副作用：如果您单击元素，它可能会缩小到零大小（暂时）。
以上情况在移动设备和不支持调整大小的浏览器上更为明显，
并且可能会保持这种状态，直到您单击或点击元素外部。
明智的做法是使用机制将其限制为 webkit 浏览器。

在这里测试：https://jsfiddle.net/ElMoonLite/771Ln5vu/

完整示例

.resize {
  resize: both;
  overflow: hidden;
/* optional:
  width:  <some sensible starting size>;
  height: <some sensible starting size>;
  min-width:  <some sensible min size>;
  min-height: <some sensible min size>;
  max-width:  <some sensible max size>;
  max-height: <some sensible max size>;
*/
}
.resize:active {
  width: 0;
  height: 0;
}

Liam Mitchell

# 2017 年 10 月 27 日

resize 是否允许指定要应用到的角或边缘？
以及图标/区域的样式。

示例：绝对的左下角区域可能希望从顶部边缘垂直调整大小。

Zach Bjornson

# 2019 年 2 月 15 日

更新/更正：Chrome 61+（不再是 WebKit 浏览器）确实允许缩小。 https://bugs.chromium.org/p/chromium/issues/detail?id=94583

Zoink

# 2020 年 6 月 3 日

是否有可能通过拖动元素的边缘来定制调整大小？

Amrit kaur

# 2021 年 9 月 8 日

resize 属性定义得很好！

值

演示

相关

更多信息

浏览器支持

台式机

移动设备/平板电脑

值

演示

相关

更多信息

浏览器支持

台式机

移动设备/平板电脑

评论

发表评论 取消回复

发表评论取消回复