yihuo/components/image-fit.vue

<template>
    <div class="flex-column-align-center" :style="{height: imageHeight + 'px', width: '100%'}">
        <image :src="src" :mode="mode" @load="load" :class="customClass" :style="{height: imageHeight + 'px', width: imageWidth + 'px'}" />
    </div>

</template>
<script>
export default {
    props: {
        src: String,
        mode: {
            default: 'aspectFit',
            type: String
        },
        offset: {
            default: 0,
            type: Number
        },
        ratio: {
            default: 1.5,
            type: Number
        },
        customClass: String
    },
    data() {
        return {
            imageHeight: 270,
            imageWidth: 375,
            screenWidth: 375
        }
    },
    methods: {
        load(e) {
            let screenWidth = this.$store.state.systemInfo.screenWidth - this.offset
            let realWidth = e.detail.width
            let realHeight = e.detail.height
            if (realHeight / realWidth > this.ratio) {
                realHeight = realWidth * this.ratio
            }
            this.imageHeight = parseInt((screenWidth / realWidth) * realHeight)
            this.imageWidth = screenWidth
            this.screenWidth = screenWidth
        }
    }
}
</script>
<style scoped>
</style>