1. resize属性是什么？
resize属性是CSS3新增的一个属性，可以控制元素的尺寸是否可以调整。它能实现图像的缩放和窗口的尺寸调整。该属性主要用于<img> 、<textarea>以及<video>等拥有“尺寸可调大小”的元素上。
1.1 CSS3语法格式
/* resize 值 */
resize: none; /* 设置元素尺寸不可调整 */
resize: both; /* 默认值，允许给元素上下左右四个角驱动 */
resize: horizontal; /* 允许元素水平方向上驱动 */
resize: vertical; /* 允许元素垂直方向上驱动 */
2. resize属性如何使用？
通过设置属性值，可以实现对图片、视频等元素的大小拖拽变化。
如下面的例子中的图片就可以使用resize属性来更改图片的大小。
2.1 元素的尺寸可调整
对于具有resize属性的元素，用户可以随意调整大小，如下例所示：
div.resize {
resize: both;
overflow: auto;
}
这是一个resize属性的div元素，可以通过拉动边框右下角的按钮调整大小。
如上代码所示，只需要对要调整大小的元素设置resize值为"both"，同时增加overflow:auto属性，即可实现元素大小的调整。
2.2 拖放事件drag
拖动事件允许在拖动时使用外观呈现元素。当元素被拖动时，会发生drag事件，通过修改类名来伪装元素每个位置的外观，这样您可以使用CSS作为动画效果或其他特效的占位符。
<div class="resize2" draggable="true" ondragstart=event.dataTransfer.setData('text/plain',null)">
这是一个拖拽事件绑定的元素。
</div>
这是一个拖拽事件绑定的元素。
如上代码所示，只需要对要拖拽的元素设置draggable值为true，在拖拽时会触发onDragStart事件，并且可以利用setData来传入text或者html等拖拽数据。
3. 总结
通过resize属性的使用，可以实现对图像、视频等元素的大小拖放变化，让其适应不同的设备和显示环境。
此外，拖拽事件，作为resize属性的一种补充，可以实现将元素在页面之间拖动的功能，增强用户的交互体验。