合理使用CSS的width、height和max-width属性，结合盒模型原理，可有效控制图片尺寸与响应式表现。首先设置width或height调整内容区域大小，配合height:auto保持宽高比，避免失真；通过max-width:100%确保图片在小屏幕不溢出容器，实现自适应显示；同时利用box-sizing:border-box、overflow:hidden等优化父容器布局稳定性，适用于头像、插图、轮播图等多种场景，提升网页整体视觉一致性与响应能力。
在网页布局中，CSS盒模型是理解元素尺寸计算的基础，尤其在处理图片这类替换元素时，width、height 和 max-width 的控制显得尤为重要。合理使用这些属性，可以让图片在不同设备上保持良好显示效果，避免溢出容器或失真。
盒模型基础与图片的关系
每个HTML元素都遵循CSS盒模型：由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）组成。对于图片而言，它默认是一个替换元素，浏览器会根据其原始尺寸决定内容大小，但可通过CSS显式控制。
当设置图片的 width 或 height 时，实际影响的是内容区域的尺寸。如果同时设置了 padding 或 border，总占用空间会更大——这在固定宽高容器中需特别注意。
用 width 和 height 控制图片尺寸
直接设置 width 和 height 可以精确控制图片显示大小，适用于需要统一尺寸的场景，比如头像、图标等。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 只设 width，height 自动等比缩放，防止变形
- 同时设置 width 和 height，可能导致拉伸失真，除非 object-fit 调整渲染方式
- 使用 height: auto 配合 width，保持原始宽高比
img {
width: 200px;
height: auto; /* 保持比例 */
}响应式图片的关键：max-width
为了让图片在小屏幕上不溢出父容器，max-width: 100% 是最常用的技巧。它让图片最大不超过容器宽度，同时保留缩小能力。
- 配合 width: 100%，实现“尽量撑满但不溢出”
- 适用于文章内容中的插图、响应式轮播图等场景
- 即使原始图片很大，也能自适应移动设备屏幕
img {
max-width: 100%;
height: auto;
display: block; /* 去除底部空白 */
}结合盒模型优化布局稳定性
当图片嵌入卡片、图文列表等复杂结构时，应考虑盒模型的整体影响。
- 给父容器设置 overflow: hidden 可裁剪溢出图片
- 使用 box-sizing: border-box 避免 padding 导致宽度超出预期
- 为图片设置最大高度（max-height）限制竖向空间占用
例如，在一个宽度固定的侧边栏中插入图片，应同时限制 max-width 和 max-height，确保整体布局稳定。
基本上就这些。掌握 width、height 与 max-width 的协同作用，再结合盒模型的理解，就能灵活应对各种图片布局需求，既保证美观又兼顾响应式。
