图片根据容器的大小自适应怎么弄？

Question

容器的大小是可以拖拽的，无规则拖拽，任意宽高，需要容器里的图片保持在容器里，并且不变形

最终效果

我写的例子
demo

Answer 1

img {
      // width: 100%;
      // height: auto;
      max-width: calc(100% - 40px);
      max-height: calc(100% - 40px);
      position: absolute;
      inset: 20px;
      margin: auto;
    }

Answer 2

应该只需要用到object-fit

img{
    width: 100%;
    height: 100%;
    object-fit: contain
}

Answer 3

img {

 width: 100%;
 height: 100%;
 object-fit: contain;

}

Answer 4

用背景图就行了

Answer 5

看了下你的demo，你是用js算的，但是你这种算法就得算容器的宽高比，然后和图片的宽高比对比，如果容器的 宽/高 大于图片的 宽/高，那图片height: 100%; width: auto;，小于就是 width: 100%; height: auto;

Answer 6

现在CSS3多了一个 vmin单位，可以试下哦