AspectRatio 宽高比

让里面的图片、视频、地图、iframe 按固定比例占位：宽度跟着容器走，高度按比例算出来。 常用在卡片封面、视频播放器、缩略图网格 —— 图片还没加载完时位置就已经占好，页面不会跳。

常用比例

16 : 9、4 : 3、1 : 1 三种比例。宽度跟着容器走，高度按比例算出来；图片默认 cover 裁切填满。

<pt-aspect-ratio ratio="1.7778">
  <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&q=80" alt="16:9"></img>
</pt-aspect-ratio>
<pt-aspect-ratio ratio="1.3333">
  <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&q=80" alt="4:3"></img>
</pt-aspect-ratio>
<pt-aspect-ratio ratio="1">
  <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&q=80" alt="1:1"></img>
</pt-aspect-ratio>

比例怎么写

ratio 是「宽 ÷ 高」的数字，默认 1。

• React / Vue / Angular 里直接写表达式：ratio={16 / 9}、:ratio="16 / 9"、[ratio]="16 / 9"。
• 原生 HTML 的 attribute 只能写小数：ratio="1.7778"。写成 ratio="16/9" 会被解析成 16； 要用分数请 JS 赋值 el.ratio = 16 / 9。
• 非数字、0、负数都按 1 处理，不会让宿主高度塌成 0。

内容怎么填

插槽里的直接子元素被拉满整个区域，图片 / 视频默认 object-fit: cover 裁切填满。 需要完整显示时给子元素写 object-fit: contain，使用方写在子元素上的样式优先。

比例是严格的：内容比区域高时会溢出，而不是把区域撑高。需要圆角裁切时在宿主上写 border-radius 与 overflow: hidden（组件自己不加 overflow: hidden，免得裁掉里面控件的焦点环）。

API

属性

属性	Attribute	类型	默认值	说明
ratio	ratio	number	1	宽 ÷ 高，如 `16 / 9`、`4 / 3`、`1`。原生 HTML 里 attribute 只能写小数（`ratio="1.7778"`）， 要写成分数就用 JS 赋值 `el.ratio = 16 / 9`。非正数或非数字时按 1 处理

插槽

名称	说明
（默认）	要按比例显示的内容，通常是一个 img / video / iframe