如何知道设置background-size：cover的背景图在不同尺寸的屏幕下放大缩小了多少？

Question

我给一个web页面设置了一张背景图片(这个页面宽高100vh和100vw)，我想知道这个图片在不同尺寸设备初始化的时候发大或者缩小了多少的比例？该如何去获取？

Answer 1

这得用js实现，获取图片的原始宽度，然后用当前窗口的宽度/图片的原始宽度

// 伪代码
import imageA from 'xx.img'
const image = new Image()
image.src = imageA
const naturalWidth = image.width // 图片原始宽度
const naturalHeight = image.height // 图片原始高度
const rateWidth = window.innerWidth / naturalWidth // 窗口宽度/图片原始宽度
const rateHeight = window.innerHeight / naturalHeight // 窗口高度/图片原始高度
const rate = Math.min(rateWidth, rateHeight) // 取小的