html中用标签插入图片需设src和alt属性；尺寸可用width/height属性（像素或百分比）或css（推荐max-width:100%+height:auto）控制；对齐须用css（如text-align:center、display:flex等），align属性已废弃。
直接用 <img> 标签插入图片，大小和对齐必须分开处理：尺寸靠 width/height 属性或 CSS 控制，对齐靠父容器样式或 display + margin 组合，不能指望单个属性一揽子解决。
怎么用 width/height 属性快速设固定尺寸
HTML 原生的 width 和 height 属性最简单，但只接受纯数字（不带单位），浏览器自动按像素渲染：
- 写
width="300" height="200"会强制缩放，可能模糊或变形——尤其原图比例不是 3:2 时 - 只写
width="50%"不写height，浏览器会按原始比例自动算高，更安全 -
height="auto"是合法值，但仅在 CSS 中生效；HTML 属性里写height="auto"会被忽略 - 该方式兼容性极好，连 IE6 都支持，适合邮件模板或老旧系统嵌入场景
怎么用 CSS 安全控制尺寸并保持比例
用 CSS 才能真正防变形、适配响应式。关键不是“设多大”，而是“别让它撑破容器”：
- 必加
max-width: 100%+height: auto，否则宽屏下图片溢出，窄屏下被拉伸 - 如果父容器有 padding 或 border，记得给
img加box-sizing: border-box避免计算偏差 - 避免同时写
width: 100%和height: 200px——这会强行压扁图片 - 需要等比缩放到容器高度？用
height: 100%前，确保所有父级（包括html、body）都有显式高度
图片和文字怎么并排且垂直居中对齐
老式 float 和 vertical-align 容易翻车，现代项目直接上 display: flex：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给包裹图和文的父
<div> 加 <code>display: flex和align-items: center - 图片本身加
max-width: 100%和height: auto，防止溢出或失真 - 文字部分别用
<p></p>这类块级标签包着——它默认是 block，会独占一行；改用<span></span>或加display: inline-block - 如果图和文写在同一行（比如
<img>文字），且想用vertical-align: middle，两者都得是 inline 级别，否则无效 - 父容器是块级（如
<div>），且你不想动图片自身 display：直接给父容器加 <code>text-align: center - 要让图片自己居中（比如独立卡片里），必须先设
display: block，再加margin: 0 auto；只写margin: 0 auto没反应，八成是忘了这步 - 别对
<img>自己加text-align: center——这属性只作用于子元素，对自己无效 - Flex 方案（
display: flex; justify-content: center）也行，但属于“杀鸡用牛刀”，除非父容器本就要做复杂布局
怎么让单张图片在页面中水平居中
两种靠谱方案，选哪个取决于上下文：
最容易被忽略的是：图片尺寸设置和对齐不是孤立操作。比如你用 width="100%" 后发现居中失效，大概率是因为父容器没设宽度，或者图片被 float 脱离了文档流——这时候查 computed styles 比猜更有用。
