HTML属性width/height仅设初始尺寸，CSS优先级更高；响应式需用srcset/sizes选资源，object-fit控缩放，容器需明确宽高或aspect-ratio。
img 标签的 width 和 height 属性为什么有时失效
直接写 width="200" 和 height="150" 看似简单，但实际中常被 CSS 覆盖——尤其当全局写了 img { max-width: 100%; }（Bootstrap、Tailwind 默认都带），这时属性值会被忽略。
关键不是“能不能用”，而是“谁说了算”：HTML 属性只提供初始渲染尺寸，CSS 的 width/height/max-width 优先级更高。
- 如果想强制按 HTML 属性生效，得加
!important，但不推荐——破坏可维护性 - 更稳妥的做法是统一用 CSS 控制，并显式覆盖默认约束：
img { max-width: none; } - 响应式场景下，
width="100%"这类写法在 HTML 属性里无效（属性只接受像素或数字，不认百分比）
CSS 中用 width / height / object-fit 精确控制图片比例
多数人只设 width，忘了 height 可能拉伸变形。真正可控的组合是：width + height + object-fit。
object-fit 决定图片如何适应容器，不是所有浏览器都默认支持（IE 完全不支持），但现代项目基本可放心用。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
object-fit: cover：等比缩放并裁剪，适合头像、封面图 -
object-fit: contain：等比缩放并留白，适合图表、图标 -
object-fit: fill：强行拉满，会变形，慎用 - 必须配合明确的容器尺寸，否则
object-fit不生效（例如父元素没设height，子img设了height: 100%也没用）
img {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center;
}
srcset 和 sizes 配合 viewport 实现响应式图片
单纯用 CSS 缩放图片，实际加载的还是原图——浪费带宽、拖慢首屏。真响应式得让浏览器选合适分辨率的资源。
srcset 告诉浏览器有哪些图可用，sizes 告诉它“在不同视口下，这张图大概占多宽”，两者缺一不可。
- 漏写
sizes，浏览器会按图片原始宽度猜，大概率选错资源 -
sizes="(max-width: 768px) 100vw, 50vw"比sizes="50vw"更精准——前者告诉小屏下图占满视口，大屏下只占一半 -
srcset里的宽度描述符（如400w）对应的是图片文件的实际像素宽度，不是 CSS 渲染宽度
<img
src="photo-400.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="示例">
图片容器撑开高度失败的常见原因
给 img 设了 height: 200px，但父容器高度还是 0？大概率是父元素是 inline 元素（比如 span）或没触发 BFC。
另一个高频问题是图片加载异步导致布局抖动——尤其是懒加载时，先占位再替换，容器高度突变。
- 避免用
span、a等 inline 元素包裹图片做布局容器 - 需要固定宽高比又不想写死
height？用aspect-ratio: 4/3（Chrome 88+、Firefox 89+ 支持） - 兼容老浏览器？靠
padding-top百分比实现：父容器设position: relative，子::before用padding-top: 75%占位 - 懒加载时，提前在
img上写height和width属性，浏览器能据此预留空间
srcset 管画什么，容器结构管有没有地方画。三者漏一个，就容易出模糊、变形、抖动或者白屏。 
