当使用CSS属性background-size:cover/contain时，背景图像会被适当缩放以填充父容器。这是一个非常有用的特性，但是有时我们需要知道计算后的宽度和高度值。在本文中，我们将展示如何使用JavaScript来检索这些计算值，并提供一些实用的指导意义。
背景
在Web开发中，我们经常需要在元素内部添加背景图像。通常，我们可以使用以下CSS代码来设置背景图像：
.my-element {
background-image: url('my-image.png');
}然而，这只能显示整张图片，并不能自适应元素的大小。为了解决这个问题，CSS引入了background-size属性，它定义了如何调整背景图像的大小。
其中最常见的两个值是cover和contain。 cover会缩放图像以完全覆盖元素，并裁剪掉超出边界的部分。contain则会缩放图像以适应元素的大小，并保留图像的完整内容。
.my-element {
background-image: url('my-image.png');
background-size: cover; /* or contain */
}计算宽度和高度值
虽然background-size属性非常方便，但是在某些情况下，我们需要知道计算后的宽度和高度值。例如，我们可能需要在JavaScript中以编程方式设置其他元素的大小，或者计算某些视觉效果。
幸运的是，我们可以使用JavaScript来检索这些值。下面是一个示例代码片段，演示如何检索background-size: cover的计算宽度和高度值：
-- -------------------- ---- -------
----- ------- - --------------------------------------
----- ----- - --- --------
--------- - ----------------------------------------------------------------------- ----------------- ----
------------ - ---------- -
----- ------------ - --------------------
----- ------------- - ---------------------
----- ---------- - -----------
----- ----------- - ------------
----- ------------ - ------------ - --------------
----- ---------- - ---------- - ------------
-- ----------- -- ------------- -
----- ----------- - ------------- - ------------
----- ----------- - ---------- - ------------
----------------------- ------ -----------------
- ---- -
----- ----------- - ------------ - -----------
----- ------------ - ----------- - ------------
----------------------- ------- ------------------
-
--该代码首先获取元素的引用，然后创建一个新的图像对象并将其加载为背景图像。一旦图像加载完成，我们就可以获取元素和图像的宽度和高度，并计算比例。最后，我们可以根据元素和图像的比例来计算缩放因子，并使用它来计算计算后的宽度或高度。
对于background-size: contain，以下代码可以检索计算宽度和高度值：
-- -------------------- ---- -------
----- ------- - --------------------------------------
----- ----- - --- --------
--------- - ----------------------------------------------------------------------- ----------------- ----
------------ - ---------- -
----- ------------ - --------------------
----- ------------- - ---------------------
----- ---------- - -----------
----- ----------- - ------------
----- ------------ - ------------ - --------------
----- ---------- - ---------- - ------------
-- ----------- -- ------------- -
----- ----------- - ------------ - -----------
----- ------------ - ----------- - ------------
----------------------- ------- ------------------
- ---- -
----- ----------- - ------------- - ------------
----- ----------- - ---------- - ------------
----------------------- ------ -----------------
-
--结论
在本文中，我们学习了如何
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29268