图片自适应主要靠CSS实现，核心是设置max-width: 100%和height: auto以等比缩放，配合响应式容器、srcset适配Retina屏，并避免width: 100%单独使用或与height: 100%混用。
图片自适应主要靠CSS控制，HTML本身只负责引入图片，关键在于搭配合适的CSS规则让图片在不同设备上自动缩放、不溢出容器、保持清晰。
设置最大宽度为100%
这是最基础也最常用的方法。给图片添加 max-width: 100% 和 height: auto，能让图片随父容器宽度等比缩放，避免横向滚动或撑破布局。
示例代码：
<img src="example.jpg" alt="示例图" style="max-width: 100%; height: auto;">配合响应式容器使用
单独设图片样式还不够，父容器也要支持响应式。比如用 div 包裹图片，并限制其宽度（如用 width: 100% 或媒体查询）。
立即学习“前端免费学习笔记（深入）”；
常见写法：
<div style="width: 100%; max-width: 800px; margin: 0 auto;"><img src="photo.jpg" alt="风景" style="max-width: 100%; height: auto;">
</div>
适配高清屏（Retina）可选优化
对高DPI屏幕，可用 srcset 提供多倍图，浏览器自动选择合适分辨率的图片。
例如：
<img src="pic-1x.jpg"srcset="pic-1x.jpg 1x,
pic-2x.jpg 2x"
alt="高清适配图">
避免常见坑点
- 不要只设 width: 100%，否则高度会塌陷或变形；必须配合 height: auto
- 慎用 width: 100% + height: 100%，容易拉伸失真
- 背景图自适应建议用 background-size: contain 或 cover，而非 img 标签
- 在移动端，记得加 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1">
