VUE中图片高度占满父容器高度,宽度按图片高宽比自动调整的方法

没什么好分析的,直接上代码:

<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>

你可能感兴趣的:(Programming)