VUE中图片高度占满父容器高度,宽度按图片高宽比自动调整的方法
没什么好分析的,直接上代码:<template>... ...<img src='@/assets/logo.png' style='height: 100%' :style='{ width: logoWidth + "px" }' @load='justifyImgWidth($event)' />... ...</template><...
·
没什么好分析的,直接上代码:
<template>
... ...
<img src='@/assets/logo.png' style='height: 100%' :style='{ width: logoWidth + "px" }' @load='justifyImgWidth($event)' />
... ...
</template>
<script>
... ...
data: () => ({
... ...
logoWidth: 0
... ...
}),
methods: {
... ...
justifyImgWidth (e) {
// ratio = orgin width / origin height = 968 / 352 = 2.75
this.logoWidth = e.currentTarget.clientHeight * 2.75
},
... ...
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)