在HTML中设置图片大小，最稳妥且符合现代标准的方法是使用CSS的max-width属性配合height:auto，既能保证图片自适应屏幕宽度，又能防止变形，同时建议始终保留alt属性以提升SEO和可访问性。
很多开发者在初期处理图片时,容易陷入直接修改width和height属性的误区，导致图片在移动端显示错乱或加载缓慢，响应式设计的核心在于“流体”与“约束”的平衡，我们需要让图片像水一样适应容器，但又不能无限拉伸导致像素模糊。
为什么传统固定宽高会导致布局崩溃
在过去,网页设计师习惯在标签中直接写入固定的像素值，例如width=”800″ height=”600″，这种做法在PC端宽屏显示器上或许能勉强维持比例，但在如今碎片化的移动设备时代，它成为了性能与体验的双重杀手。
移动端适配的痛点
当屏幕宽度小于图片原始宽度时,固定宽高的图片会出现横向滚动条，或者被强制压缩导致文字难以阅读，据统计，多数情况下，未做响应式处理的图片会导致移动端跳出率显著上升，用户不愿意为了看一张图而左右滑动屏幕，这种交互体验极其糟糕。
比例失调引发的视觉疲劳
如果强行通过CSS强制拉伸图片以填满容器,图片中的文字、人脸或细节会发生扭曲，业内专家指出，视觉上的畸变会直接降低用户对网站专业度的信任感，保持纵横比（Aspect Ratio）是设计的基本准则，任何破坏这一准则的操作都是对用户体验的亵渎。
现代CSS方案：实现真正的响应式图片
要解决上述问题,我们需要引入更灵活的CSS规则，目前业界共识认为，使用相对单位或CSS属性组合是最佳实践。
核心代码：max-width与auto
这是最简单也最有效的方案,通过以下CSS代码，你可以让图片在任何容器中保持原始比例，并自动适应容器宽度。
- max-width: 100%：确保图片宽度永远不会超过其父容器的宽度，但允许它小于容器宽度（当图片本身较小时）。
- height: auto：高度根据宽度自动计算，严格保持原始纵横比，防止变形。
具体操作路径如下：在