Aspect Ratio / 长宽比

保持长宽比的容器。

特性

良好兼容性

基础用法

<template>
  <AspectRatio
    width="16rem"
    :ratio="16 / 9"
  >
    <Image
      src="https://picsum.photos/seed/2/512/512"
    />
  </AspectRatio>
</template>

提示

对于 `aspect-ratio` 组件，如果在 `flex` 布局中使用，设置一个合适的宽度或者高度是必要的。

嵌入地图

一种常见的应用是嵌入一个地图。

<template>
  <AspectRatio
    width="100%"
    :ratio="16 / 9"
  >
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.747975777082!2d139.742857977263!3d35.65858047259476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5Lic5Lqs6ZOB5aGU!5e0!3m2!1szh-CN!2sjp!4v1705225332461!5m2!1szh-CN!2sjp"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
    />
  </AspectRatio>
</template>

嵌入视频

另一种场景是嵌入视频。

<template>
  <AspectRatio
    width="100%"
    :ratio="16 / 9"
  >
    <iframe
      src="//player.bilibili.com/player.html?aid=605030231&bvid=BV1L84y1y7Lv&cid=890299277&p=1"
    />
  </AspectRatio>
</template>