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

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064735

原文链接: css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果

上一篇: cocos 随机变色的拖尾

下一篇: css 自定义属性和雪花飘落效果

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

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

https://developer.mozilla.org/en-US/docs/web/css/resize

https://developer.mozilla.org/en-US/docs/web/css/object-fit

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将其设置为等比例拉伸适应父节点大小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      .resizable {
        resize: both;
        overflow: auto;
        width: 408px;
        height: 287px;
        outline: 2px solid hotpink;
      }
      .resizable img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    </style>
  </head>
  <body>
    <div class="resizable">
      <img src="http://placekitten.com/408/287" width="408" height="287" />
    </div>
  </body>
</html>