Berechnen Sie automatisch die Breite und Höhe des Bildes und strecken Sie es mit der einfachen Implementierung von CSS und VUE auf den Vollbildmodus

1. Einleitung

1. Szenario: Zum Beispiel APP-Cover usw.
2. Eigenschaften: Es kann sich automatisch an die Breite und Höhe des Geräts anpassen und gewährleistet so eine 100-prozentige Anzeige des Bildes, ohne dass Kanten fehlen oder zurückbleiben, es kann jedoch zu Verformungen kommen .

---

2. Erkenne

Beachten Sie, dass der folgende Code zwar in der Vue-Umgebung implementiert ist, aber wenig mit Vue zu tun hat und der Code selbst so einfach ist, dass er mit einer kleinen Modifikation auf jede andere Nicht-Vue-JS-Umgebung erweitert werden kann.

HTML:

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

Skript:

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