在网页设计中，让图片自适应显示且不拉伸不裁剪是一个常见需求。合理运用CSS可以轻松实现这一效果，为用户带来更好的视觉体验。

使用max-width和height:auto属性组合是一种简单有效的方法。当设置图片的max-width为100%，height:auto时，图片的宽度会自适应其容器的宽度，高度则按原始比例缩放。例如：

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

这种方式适用于大多数场景，尤其是当图片容器宽度固定时，能确保图片不会超出容器边界，同时保持原有比例，避免拉伸变形。

min-width和max-height属性也能发挥作用。若设置min-width为图片原始宽度，max-height为一个合适的值，当图片所在容器高度有限时，图片高度会自适应容器高度，宽度按比例调整。代码如下：

img {
  min-width: 300px;
  max-height: 200px;
}

对于一些需要更精确控制的情况，object-fit属性是个强大的工具。它有多个取值，其中“contain”值能让图片完整显示在容器内，按比例缩放，不会裁剪也不会拉伸。示例代码如下：

img {
  object-fit: contain;
}

“cover”值则会使图片完全覆盖容器，按比例缩放，可能会裁剪部分图片边缘以填满容器，但能保证容器被完全填充且图片比例不变。

另外，利用flex布局和grid布局也可以实现图片自适应。通过设置父元素的布局属性，让图片在布局中自动调整大小。比如在flex布局中：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  max-width: 100%;
  height: auto;
}

通过上述多种CSS方法，可以根据不同的设计需求，灵活选择合适的方式，让图片在网页中实现自适应显示，既不拉伸也不裁剪，从而提升整个页面的美观度和用户体验。无论是简单的静态页面还是复杂的响应式设计，这些技巧都能发挥重要作用。