CSS resize属性

前言

之前写了一篇通过指令实现element弹窗的全屏与移动，但是关于拖拽放大的功能一直没有特别好的思路
直到看到了下面的这篇文章：
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

通过 CSS的resize属性就可以实现该功能，关于弹窗的这个后期有空会重构一下。这里主要简单记录一下resize属性的相关使用。

对element弹窗的全屏与移动感兴趣的可以看一下我的这篇文章：
指令实现element弹窗的全屏与移动

resize

resize属性指定一个元素是否是由用户调整大小的。

语法

resize: none|both|horizontal|vertical:

• none：用户无法调整元素的尺寸。
• both 用户可调整元素的高度和宽度。
• horizontal 用户可调整元素的宽度。
• vertical 用户可调整元素的高度。

实例

 <div class="content">调整属性指定一个元素是否由用户可调整大小的。</div>

.content {
  border: 2px solid;
  padding: 10px 40px;
  width: 200px;
  resize: both;
  overflow: auto;
}

效果

注意点：

• resize属性适用于计算其他元素的溢出值是不是"visible"。这句话说明必须加上overflow: auto;这个属性
• 从效果图中可以看出，当缩放到一定程度后会出现滚动条，因此在事件应用中要给div指定盒子的最大值和最小值