如何用JavaScript计算background-size: cover下背景图片的缩放比例？

JavaScript计算background-size: cover下背景图片缩放比例

在网页设计中，background-size: cover 属性能确保背景图片完全覆盖容器，并按容器宽高比缩放。但我们可能需要知道图片在不同屏幕尺寸下的缩放倍数。本文介绍如何用 JavaScript 代码获取该缩放比例。

问题： 假设一个全屏网页（宽度和高度均为 100vw 和 100vh），设置一张背景图片，使用 background-size: cover。我们需要知道图片在不同设备上的初始缩放比例。

解决方案： 核心思路是获取图片原始宽高，与窗口宽高比较，计算缩放比例。

立即学习“Java免费学习笔记（深入）”；

以下代码片段演示如何实现：

// 获取背景图片URL (需要根据实际情况修改)const bgImageUrl = getComputedStyle(document.body).backgroundImage.slice(4, -1).replace(/"/g, "");const img = new Image();img.onload = function() {  const naturalWidth = this.width;  const naturalHeight = this.height;  const windowWidth = window.innerWidth;  const windowHeight = window.innerHeight;  const rateWidth = windowWidth / naturalWidth;  const rateHeight = windowHeight / naturalHeight;  const scale = Math.min(rateWidth, rateHeight);  console.log("背景图片缩放比例:", scale);};img.src = bgImageUrl;//辅助函数，获取背景图片URL，兼容多种写法function getComputedStyle(element){  return window.getComputedStyle(element);}

登录后复制