如何使容器中的图片在任意宽高情况下始终保持在容器内且不失真？

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何使容器中的图片在任意宽高情况下始终保持在容器内且不失真？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

无限制拖拽容器中的图片自适应

问题：
如何使容器中的图片在容器大小无规则拖拽、任意宽高的情况下，始终保持在容器内且不失真？

最终效果：
[图像]

例子：
[demo]

解决方案：

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

说明：

• 去掉原有的 width: 100%; 和 height: auto;。
• 设置 max-width 和 max-height，保证图片尺寸不超过容器尺寸。
• 设置 position: absolute;，使图片相对于容器定位。
• 设置 inset: 20px;，在容器内留出 20px 的边距。
• 设置 margin: auto;，使图片在容器内水平垂直居中。

通过这种方式，图片可以适应任意宽高的容器，并始终保持在一个合理的大小和位置内。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~