标签导航：

可拖拽容器中，如何让图片保持比例且不失真？

如何在可拖拽容器中保持图片比例并防止失真？

许多应用场景需要图片根据容器大小自适应，尤其是在容器大小可通过拖拽调整的情况下，如何确保图片在容器内居中显示且不失真，是一个常见难题。本文提供一个高效的CSS解决方案。

问题：在一个可拖拽调整大小的容器中，如何让图片始终保持比例，避免拉伸或压缩变形？

解决方案：以下CSS代码能够有效解决这个问题：

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: auto;
}

这段代码的关键在于max-width: 100%; 和 max-height: 100%;。 这两行代码限制了图片的最大宽度和高度，使其不会超过容器的尺寸。 width: auto; 和 height: auto; 则确保图片保持其原始比例。 display: block; 使图片占据容器的整个宽度，而 margin: auto; 则实现图片在容器内的水平和垂直居中。 这种方法确保图片在任何容器大小下都能保持比例，并且不会变形。 如果需要内边距，可以调整容器的padding属性，而不是修改图片样式。

需要注意的是，如果图片的原始尺寸远小于容器，图片将会保持其原始大小并居中显示。