图片布局不一致源于容器逻辑与填充策略未对齐，应使用object-fit+aspect-ratio统一视觉呈现，配合语义化结构与现代布局方案（如flex、grid）实现稳健响应式效果。

图片布局“不一致”根本不是图片本身的问题，而是容器逻辑和填充策略没对齐。直接硬设 width 和 height 属性只会让问题更隐蔽——拉伸、溢出、响应式失效全在后面等着。

用 object-fit + aspect-ratio 锁定视觉一致性

多张图尺寸各异，但想在卡片里看起来“一样高、一样稳”，靠缩放不如靠裁剪+比例约束。关键不是统一图片像素值，而是统一容器的内容呈现逻辑。

• object-fit: cover 是最常用选择：保持原始宽高比，裁掉溢出部分，适合封面图、商品主图
• 必须配合显式尺寸约束才生效——只写 max-width: 100% 没用；推荐用 aspect-ratio: 4 / 3（现代浏览器）或 padding-top 技巧（兼容旧版）
• IE 不支持 object-fit 和 aspect-ratio，若需兼容，得 fallback 到 background-image + background-size: cover 方案
• SVG 或图标类图片不能直接套用 —— 它们不是替换元素，object-fit 对其无效

并排图片别用 float，改用 display: inline-block 或 grid

浮动布局现在只剩一个价值：帮你理解为什么它容易塌陷、错位、清除失败。真实项目里，它早该被替代了。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• float: left 配合 margin-right 看似简单，但最后一张图的间距得额外处理（比如 img:last-child { margin-right: 0 }），维护成本高
• display: inline-block 更干净：父容器设 text-align: justify，再加 :after { content: ""; display: inline-block; width: 100%; } 可实现真正两端对齐
• 如果支持现代浏览器，直接上 display: grid：一行代码控制列数、间隙、自动换行，grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 就够用
• 所有方案中，都建议把每张图和它的标题包进一个 <figure></figure> 或 <div class="image-wrapper">，避免 <code><figcaption></figcaption> 的块级行为破坏布局

  底部对齐两张图？别调 vertical-align，用 flex 的 align-items

  想让两张高度不同的图底部对齐，用 vertical-align: bottom 是典型误区——它只对行内/表格单元格生效，且受基线干扰严重。实际效果常是“看似对齐，放大一看差两像素”。

  • 正确做法：把两张图放进一个 display: flex 容器，设 align-items: flex-end
  • 记得给 <img> 加 height: auto 和 max-width: 100%，否则 flex 会按原始尺寸撑开容器
  • 如果图下方还要配文字，把文字也放进同一 flex 容器，并用 margin-top: auto 推到底部，比各种定位 hack 更可靠
  • 不要在 <img> 上直接写 align 属性——HTML5 已弃用，Chrome/Firefox 早就无视它了

  最易被忽略的一点：图片语义和布局不该混在一起。一张图是否需要 <figure></figure> + <figcaption></figcaption>，取决于它有没有独立信息价值；而怎么排、怎么对齐，纯属样式层决策。把这两层搅和在一起，后期改版时要么重写 HTML，要么推翻整个 CSS 体系。