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

  • 2022-08-11
  • 浏览 (2759)

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

npm install vue-proportion-directive --save

2、在main.js中引入指令

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

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

3、示例

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

效果如下

image-20220513212543962

你可能感兴趣的文章

Vue如何使用G2绘制图片

Docker Compose入门学习

DockerDesktop入门简介

Docker图形化工具Portainer介绍与安装

1.Docker

Docker操作系统之Alpine

如何将镜像推送到阿里云容器镜像服务

对象存储MinIO入门介绍

ElasticSearch安装与介绍

Beats入门简介

0  赞