图片高度自适应需用max-width:100%配合height:auto实现等比缩放，flex/grid容器中须加min-width:0防止失效；固定尺寸容器用object-fit控制填充方式；搭配srcset+sizes实现响应式图片加载。

图片高度自适应不是靠单独设 height 属性实现的，而是通过控制宽度上限 + 保持比例 + 浏览器自动计算高度来完成。核心是让浏览器“知道它能撑多宽”，然后按原始宽高比推算出合理高度。

用 max-width + height: auto 强制等比缩放

这是最通用、兼容性最好的写法：

• 给 img 写 max-width: 100%：限制图片最大显示宽度不超过父容器
• 同时写 height: auto：告诉浏览器别固定高度，按原始比例算
• 务必清除 img 标签上可能存在的内联 width/height 属性（如 width="600" height="400"），否则 height: auto 会被覆盖失效

在 Flex 或 Grid 容器里要加 min-width: 0

如果图片放在 display: flex 或 display: grid 的容器中，它默认有 min-width: auto，会“扛着原始宽度”拒绝缩小，导致 max-width: 100% 失效：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

• 补上 min-width: 0，覆盖默认行为
• 完整推荐样式：img { max-width: 100%; height: auto; min-width: 0; }
• 不依赖 flex-shrink: 1，那个对 img 不稳定

需要固定容器尺寸时用 object-fit

当父容器本身有明确宽高（比如头像框 80×80px），但图片比例不统一，就要靠 object-fit 控制内部适配方式：

• object-fit: cover：等比缩放后居中裁剪，填满整个容器（适合封面、头像）
• object-fit: contain：等比缩放后完整显示，留白（适合产品图、图表）
• 必须配合显式设置容器的 width 和 height 才生效
• 老版 iOS Safari 需加 -webkit-object-fit 前缀；IE 不支持，fallback 可用 background-image

别只靠 CSS 缩放，记得搭配 srcset + sizes

CSS 控制的是“怎么显示”，而 srcset + sizes 控制的是“加载哪张图”。光缩放一张大图，在小屏上浪费带宽，高清屏上又可能模糊：

• 用 sizes="(max-width: 768px) 100vw, 50vw" 告诉浏览器：“这张图在小屏占满宽度，大屏占一半”
• srcset 列出不同固有宽度的图，如 "small.jpg 480w, medium.jpg 960w, large.jpg 1920w"
• 浏览器结合 sizes 和设备 DPR，自动选最匹配的源，再用上面的 CSS 规则渲染

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！