实现图片在可变大小容器内完美适配并保持比例

许多应用场景需要图片能够根据容器大小动态调整，同时保持其原始比例，避免变形。本文将探讨如何在可调整大小的容器中，确保图片始终充满容器且不失真。

问题：如何让图片在可拖拽、大小不定的容器中，始终保持在容器内并完美适配？

直接使用 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;
}

代码解释：

• max-width: calc(100% - 40px); 和 max-height: calc(100% - 40px);：设置图片的最大宽度和高度，calc() 函数计算容器宽度和高度减去 40px 的内边距，确保图片不会超出容器边界。
• position: absolute;：将图片设置为绝对定位，使其相对于容器进行定位。
• inset: 20px;：设置图片距离容器四边各 20px 的内边距。
• margin: auto;：自动设置图片的左右和上下外边距，使其在容器内水平和垂直居中。

通过以上 CSS 代码，图片将根据容器大小自动调整，始终保持在容器内，并保持其原始比例，避免变形，实现完美的适配效果。 这种方法比单纯使用 width: 100%; height: auto; 或反向设置更有效地解决了图片在可变大小容器中的比例和失真问题。