使用max-width:100%和height:auto可使图片自适应屏幕并保持比例，结合object-fit或响应式容器适用于不同场景，视口单位可实现等比缩放，推荐根据需求选择合适方法。
让图片自适应屏幕大小，关键在于控制其宽度、高度以及保持比例。以下是几种常用的CSS方法来实现图片的自适应显示。
1. 设置最大宽度为100%
这是最基础也是最常用的方法。通过设置 max-width: 100%，可以让图片在容器内自动缩放，不会超出父元素或屏幕宽度。
同时结合 height: auto 可以保持图片的原始宽高比，避免变形。
示例代码：
img {
max-width: 100%;
height: auto;
display: block; /* 可选：去除底部空白 */
}
2. 使用视口单位（vw/vh）控制尺寸
如果希望图片根据屏幕宽度或高度等比缩放，可以使用视口单位。例如，让图片宽度始终占屏幕宽度的某个百分比。
立即学习“前端免费学习笔记（深入）”；
示例：
img {
width: 80vw; /* 图片宽度为视口宽度的80% */
height: auto;
}
注意：这种方法可能在高度变化大时导致图片被拉伸，建议配合 object-fit 或限制最大高度。
3. 使用 object-fit 处理背景类图片
当图片作为内容图且需要填充特定区域时（如卡片封面），可将图片设为块级并使用 object-fit 属性。
示例：
img {
width: 100%;
height: 300px; /* 固定高度或使用vh */
object-fit: cover; /* 裁剪以填满区域 */
object-position: center; /* 保持居中 */
}
适用于轮播图、头像框等需要统一尺寸的场景。
4. 配合响应式容器使用
在移动端适配中，推荐将图片放入一个响应式容器中，再进行样式控制。
HTML 示例：CSS 样式：@@##@@
.image-container {
width: 100%;
overflow: hidden;
}
.image-container img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
这样可以在不同设备上保持良好的布局结构。
基本上就这些。根据实际需求选择合适的方式，大多数情况下 max-width: 100%; height: auto; 就足够了，简单有效又兼容性好。
