CSS——两个属性实现dom缩放功能

最新推荐文章于 2024-11-14 11:56:16 发布

丶扁扁的糖是扁的

最新推荐文章于 2024-11-14 11:56:16 发布

阅读量1.2k

点赞数 3

分类专栏： html Css 文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/sugerinaflat/article/details/124933756

版权

html 同时被 2 个专栏收录

7 篇文章

订阅专栏

Css

7 篇文章

订阅专栏

本文探讨了如何通过CSS的resize和overflow属性来为<div>元素添加类似于<textarea>的缩放功能。作者发现textarea的缩放关键在于resize属性，但单纯设置resize并未使<div>生效。进一步研究后，发现在overflow属性不为visible时，resize才能起作用。通过设置这两个属性，可以实现自定义元素的缩放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、关于 <textarea> 引发的思考

因为<textarea>元素是自带缩放功能的，本来想参考它的实现给我要实现缩放的<div>元素添加一个类似的缩放，但是研究了下发现它的缩放好像不是依靠 JS 事件。

于是抓了下<textarea>的原生css如下：

resize：

看到了resize这个关键属性，然后就给我的<div>加上了resize：

但是并没有生效。我的<div>没有发生任何改变😟，甚至连鼠标悬浮时的样式都没有变化：

overflow：

在我把所有其他的属性都给我的<div>赋予了一遍之后，我也没有得到其他的关键属性。

可见这个关键属性并不在<textarea>的原生css里。

查阅一番后了解到，第二个关键属性是overflow，只要dom的overflow属性不为visible，被赋予resize的dom就可以和<textarea>一样实现缩放。

2、使用 resize 和 overflow 属性实现dom缩放

给元素的 resize赋予值，并且元素的overflow 不为visible,即可实现dom的缩放功能

.fluid-div {
  width: 150px;
  height: 150px;
  background-color: #ff1d5e;
  resize: auto;
  overflow: auto;
}