利用 CSS 达成图片宽高自适应

在网页设计中，让图片实现宽高自适应是一项重要的技巧，它能确保图片在不同设备和屏幕尺寸下都能完美展示，提升用户体验。CSS 提供了多种方法来达成这一目标。

使用 max-width: 100%; height: auto; 与 height: auto 这组属性值是较为常用的方式。当对图片应用 max-width: 100%; height: auto; 时，图片的宽度会自动适应父元素的宽度，并且高度会按图片原始的宽高比进行缩放，保持图片不失真。例如，在一个宽度为 500px 的容器中放置一张宽度为 800px 的图片，应用该属性后，图片宽度会自动调整为 500px，高度根据原始宽高比等比例缩小。而 height: auto 与 width: auto 配合使用时，同样能保证图片在自适应过程中保持原始比例，让图片无论在宽度优先还是高度优先的情况下，都能合理显示。

利用 object-fit 属性也是不错的选择。object-fit 有多个取值，如 fill、contain、cover、none 和 scale-down。fill 会拉伸图片以填满整个容器，这种情况下图片可能会失真，但能完全占据容器空间；contain 会使图片完整显示，并且保持原始比例，同时适应容器大小，图片可能不会填满整个容器；cover 则是让图片完全覆盖容器，图片会按比例缩放，可能会裁剪部分内容；none 使图片保持原始大小，不进行任何自适应处理；scale-down 会在 none 和 contain 中选择较小的尺寸来显示图片。

通过 CSS 框架也能轻松实现图片宽高自适应。像 Bootstrap 这样的流行框架，提供了专门的类来处理图片自适应问题。只需为图片添加相应的类名，就能让图片在不同的屏幕分辨率下自适应显示，大大提高了开发效率。

掌握这些利用 CSS 达成图片宽高自适应的方法，能帮助网页开发者打造出更加美观、适配性更强的页面，满足用户在各种设备上浏览网页的需求。