vant ratio 调整文本位置

Vant是一个轻量级的Vue组件库，其中的`van-ratio`组件主要用于处理图片和内容之间的比例关系，比如响应式布局中的缩略图或背景图片大小控制等场景。当你需要调整元素内的文本位置，使其保持在一个自适应的框内，你可以通过设置`ratio`属性来达到目的。

`ratio`属性接受一个数字或字符串，如果是数字，它表示宽高比，例如`"4:3"`、`16:9`等；如果是字符串，可以是CSS样式，如`"height: auto; width: 100%"`。然后，你可以配合其他CSS样式，比如`align-items`和`justify-content`来自定义文本在容器内的垂直和水平对齐方式，比如让文本居中显示：

<template>
  <van-ratio :ratio="ratio">
    <div class="content">
      {{ content }}
    </div>
  </van-ratio>
</template>

<style scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<script>
export default {
  data() {
    return {
      ratio: "4:3",
      content: "这是动态内容",
    };
  },
};
</script>

在这个例子中，`content`将按照指定的比例自动调整其高度，并且文本会始终位于中心位置。