Vue如何给图片宽高设置固定比例

73 字

1 分钟

Vue如何给图片宽高设置固定比例

2024-12-07

Vue

VUE标签根据宽度按比例实现高度 1、安装指令 “vue-proportion-directive”: “^1.1.0”,

1
npm install vue-proportion-directive --save

2、在main.js中引入指令

// 控制标签宽高成比例的指令

1
import proportion from 'vue-proportion-directive';
2
Vue.use(proportion);

3、示例

1
<div class="div1" style="width: 20%;float: left" v-proportion="0.85"></div>
2
<div class="div2" style="width: 30%;float: left" v-proportion="1.6"></div>
3
<div class="div3" style="width: 40%;float: left" v-proportion="0.65"></div>

效果如下

Vue如何给图片宽高设置固定比例

http://localhost:4321/posts/vue/vue如何给图片宽高设置固定比例/

发布于

2024-12-07

许可协议

CC BY-NC-SA 4.0