示例
直接操作示例，查看组件在具体任务中的状态与反馈。
16:9 预览
16:9 本地预览
1:1 缩略图
1:1 缩略图
封面占位
1:1
16:9 视频
16:9 视频
4:3 预览
4:3 预览
使用建议
比例必须来自内容合同
视频预览常用 16:9，方形缩略图使用 1；组件只接受大于零的有限数字。
为媒体提供替代信息
图片和视频仍需由宿主提供 alt、字幕或邻近说明，比例容器本身不产生媒体语义。
先决定裁剪再放入内容
根据业务选择 contain 或 cover，并验证关键区域不会因窄屏裁剪而丢失。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseAspectRatio } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- AspectRatio 只设置 CSS aspect-ratio，不负责媒体加载、object-fit、裁剪焦点、加载失败回退或替代文本。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseAspectRatioProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
ratio?: number;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseAspectRatioClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseAspectRatio 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
ratio | 内容区域的宽高比，例如 16 / 9。 | number | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseAspectRatioClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |