vue图片超出屏幕尺寸自动适应图片比例缩放

vue图片超出屏幕尺寸自动适应图片比例缩放

<div> <el-button class="blue-btn" @click="open">弹出dialog</el-button> <el-dialog :show-close="false" :before-close="close" :visible.sync="dialogVisible" custom-class="hint" top="50px" :width="width + 'px'" center> <div class="imgwrapper"> <el-button class="dark-grey-btn left" @click="left">左</el-button> <img :src="imgList[index].imgUrl" class="img" ref="imgs" :style="{width: imgWidth + 'px', height: imgHeigth + 'px'}" @load="onload" /> <el-button class="dark-grey-btn right" @click="right">右</el-button> </div> <span slot="footer" class="dialog-footer"> <el-button class="dark-grey-btn" @click="close">关闭</el-button> </span> </el-dialog> </div> export default { name: 'music', data () { return { index: 0, width: '', // dialog 宽 imgWidth: '', // 要设置的img宽 imgHeigth: '', // 要设置的img高 dialogVisible: false, imgList: [ { imgUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3681705955,4153554780&fm=26&gp=0.jpg' }, { imgUrl: 'http://192.168.188.127:8711/upload/veterans_dev/manageImage/11.jpg' }, { imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1093300176,3481197507&fm=26&gp=0.jpg' }, { imgUrl: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2156271884,4153213391&fm=26&gp=0.jpg' } ] } }, computed: { winWidth: function () { return document.documentElement.clientWidth || document.body.clientWidth; }, winHeight: function () { return document.documentElement.clientHeight || document.body.clientHeight; } }, created () { }, mounted () { }, methods: { onload (e) { // 图片加载时 let imgW = e.target.naturalWidth// 图片宽 let imgH = e.target.naturalHeight // 图片高 let maxWidth = 1240 // 如果图片宽高小于浏览器,不做改变 if (imgW < maxWidth && imgH < this.winHeight - 251) { this.width = imgW + 50 this.imgWidth = imgW this.imgHeigth = imgH } else { //图片的宽高比例大于dialog最大宽高比时，以dialog内容的最大宽度为图片的宽度 if ((maxWidth - 50) / (this.winHeight - 251) <= imgW / imgH) { this.width = maxWidth this.imgHeigth = (maxWidth - 50) / (imgW / imgH) this.imgWidth = maxWidth - 50 // 减去dialog的左右padding } else { this.imgWidth = (this.winHeight - 251) * (imgW / imgH) this.width = this.imgWidth + 50 this.imgHeigth = this.winHeight - 255 // 减去dialog的padding和其他内容部分 } } }, close () { this.dialogVisible = false }, open () { this.dialogVisible = true }, right () { if (this.index < this.imgList.length - 1) { this.index++ } }, left () { if (this.index > 0) { this.index-- } } } }