图片自适应主要靠css实现，核心是设置max-width: 100%和height: auto以等比缩放，配合响应式容器、srcset适配retina屏，并避免width: 100%单独使用或与height: 100%混用。
图片自适应主要靠CSS控制，HTML本身只负责引入图片，关键在于搭配合适的CSS规则让图片在不同设备上自动缩放、不溢出容器、保持清晰。
设置最大宽度为100%
这是最基础也最常用的方法。给图片添加 max-width: 100% 和 height: auto，能让图片随父容器宽度等比缩放，避免横向滚动或撑破布局。
示例代码：
配合响应式容器使用
单独设图片样式还不够，父容器也要支持响应式。比如用 div 包裹图片，并限制其宽度（如用 width: 100% 或媒体查询）。
常见写法：
适配高清屏（Retina）可选优化
对高DPI屏幕，可用 srcset 提供多倍图，浏览器自动选择合适分辨率的图片。
例如：
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 标签：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
