博客

1、简介

1. 场景：比如说APP封面等
2. 特点：能够自动适应设备的宽高，保证图片100%显示，不会缺失或者留边，
   
   但有可能会变形
   
   。

2、实现

注意以下代码尽管是在Vue环境下实现的，但与Vue关系不大，代码本身也足够简单，稍微改改可以扩展到任何其他非Vue的JS环境。

HTML:

<template>
    
	<img src="picture.jpg" :width="width" :height="height">
    
</template>

Script:

<script>

export default {
    data: () => ({
        height:0,
        width:0,
    }),
    methods: {
        handleResize() {
        	// 获取屏幕宽高：
            const screenWidth = window.innerWidth
            const screenHeight = window.innerHeight
			// 动态设置图片宽高：
            this.height= screenHeight
            this.width = screenWidth
        },
    },
    mounted: function () {
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize)
    },
};
</script>