在加载图片时，希望默认顶部对齐

[xi-gyoku]

目前是剧中对齐，图片的头部和底部都被遮住了。

尝试修改了图片的 style，但是发现截图时截图的内容发生了错位。

请问有没有方法可以设置加载图片时图片的对齐方式？

[xi-gyoku]

期望是下面的样式：

目前的样子：

[xyxiao001]

mode 可以设置图片布局方式

[xi-gyoku]

mode 可以设置图片布局方式

尝试过使用 mode 属性：

• contain： css3 background-size.contain
• cover：css3 background-size.cover
• 100px / 100% auto： 这两种仿佛类似，前者仿佛等价于 100px auto

但是实际上希望的效果是比如：固定宽度，高度自适应，但不是垂直居中显示，而是图片在视口的顶部对齐。

以 mode: 'auto 50%' 来说，现在是这样的：

希望的效果是这样的：

下面是代码：

<template>
  <div id="app">
    <VueCropper
      style="height: 100vh;width:100vw"
      ref="cropper"
      :img="options.img"
      :info="true"
      :canScale="true"
      :original="false"
      :centerBox="false"
      mode="auto 50%"
    ></VueCropper>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
import img from './assets/timg.jpg'

export default {
  components: { VueCropper },
  data: () => ({
    options: {
      img,
    },
  }),
}
</script>

<style>
* {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
</style>