直接用aspect-ratio: 1/1配合object-fit: cover可实现正方形裁剪，但需同时满足：容器宽度可计算、高度未被height/min-height等显式声明覆盖、img设width:100%;height:100%;display:block。
直接用 aspect-ratio: 1 / 1 配合 object-fit: cover 就能实现——但前提是容器宽度可算、高度不被显式覆盖，否则它根本不会生效。
为什么只写 object-fit: cover 不出正方形
object-fit 只管图片怎么塞进已有框里，不管框本身是不是正方形。如果父容器没设宽高比或高度塌陷（比如 height: auto），浏览器连“裁哪一块”都无从判断。
- 常见错误：只给
<img alt="HTML怎么让正方形图片自适应裁剪显示" >加object-fit: cover，但外层<div> 没设 <code>aspect-ratio或固定尺寸 - 更隐蔽的坑：父容器写了
height: 100%，而它的父级高度是auto→ 实际高度为 0，aspect-ratio直接失效 - Safari 15.0–15.3 会通过
@supports (aspect-ratio: 1 / 1)检测，但渲染时静默忽略——真机必测，不能只看检测结果 -
width: 100%（或具体像素值、max-width）——提供计算基准 -
aspect-ratio: 1 / 1——现代浏览器下最干净的正方形约束 -
img { width: 100%; height: 100%; object-fit: cover; display: block; }——确保图片撑满容器且裁剪生效 - 现代写法放前面：
aspect-ratio: 1 / 1 - fallback 必须用伪元素撑高：
::before { content: ""; display: block; padding-top: 100%; }，再用position: absolute把图片填进去 - 千万别把
aspect-ratio和padding-bottom: 100%写在同一选择器里还加height: 0——height: 0会让aspect-ratio彻底失效
必须同时设置的三个 CSS 属性
缺一不可，顺序和取值都有讲究：
注意：display: block 是为了消除 <img alt="HTML怎么让正方形图片自适应裁剪显示" > 默认 inline 带来的底部留白；overflow: hidden 不需要加，cover 自带裁剪行为。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
兼容性 fallback 怎么写才不翻车
想兼容老浏览器（比如 Safari ≤15.3），不能靠 @supports 包裹 aspect-ratio，得用结构级降级：
真正容易被忽略的是：所有这些规则都依赖“宽度可推导”。如果你把它放在一个 display: flex 容器里，又没给子项设 flex-basis 或 width，那 aspect-ratio 就只是段注释。
