实现图片在可变大小容器内完美适配并保持比例
许多应用场景需要图片能够根据容器大小动态调整，同时保持其原始比例，避免变形。本文将探讨如何在可调整大小的容器中，确保图片始终充满容器且不失真。
问题：如何让图片在可拖拽、大小不定的容器中，始终保持在容器内并完美适配？
直接使用 width: 100%; height: auto; 或 width: auto; height: 100%; 虽然可以使图片适应容器的一个维度，但另一个维度会随之改变，导致图片变形。
解决方案：巧妙运用 CSS 属性 max-width、max-height、position: absolute; 和 inset 属性。
核心代码：
img { max-width: calc(100% - 40px); max-height: calc(100% - 40px); position: absolute; inset: 20px; margin: auto;}
登录后复制
本文来自互联网或AI生成，不代表软件指南立场。本站不负任何法律责任。
