vue js动态设置img长宽比例

可以使用 Vue.js 的绑定语法，动态设置图片的长宽比例。具体实现方法如下：

<template>
  <div>
    <img :src="imageUrl" :style="{ aspectRatio: ratio }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      ratio: 16/9 // 设置默认的长宽比例为16:9
    }
  }
}
</script>

在上面的代码中，我们使用了 `:style` 绑定来动态设置图片的长宽比例。在样式中，使用了 `aspectRatio` 属性来设置图片的长宽比例。`aspectRatio` 属性是 CSS 的一部分，可以用于设置元素的长宽比例。

在 Vue.js 中，我们可以使用绑定语法 `:style="{ aspectRatio: ratio }"` 来绑定 `ratio` 数据属性到 `aspectRatio` 样式属性上。这样，每当 `ratio` 数据属性发生变化时，图片的长宽比例也会自动变化。