html设置图片的拖动改变大小,css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果...

我们需要的效果, 小猫的照片会自动的适应, 并且不会有比例上的拉伸

resize有四个值: none|both|vertical|horizontal; 表示什么方向上可以拉伸

object-fit：fill,完全拉伸填满

被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。

object-fit:contain, 等比例拉伸适应

被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

object-fit:cover, 等比例拉伸, 超出父级不可见

被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

object-fit:none, 大小不变

被替换的内容尺寸不会被改变。

object-fit:scale-down, 原图大小和等比例拉伸, 哪个小用哪个

内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

主要思路是用一个div包裹一个img, div上使用resize将其变为可修改大小的, img上使用object-fit将其设置为等比例拉伸适应父节点大小

.resizable {

resize: both;

overflow: auto;

width: 408px;

height: 287px;

outline: 2px solid hotpink;

}

.resizable img {

width: 100%;

height: 100%;

object-fit: contain;

}