CSS 从background-size:cover/contain中检索计算值

在本文中，我们将介绍如何从CSS属性background-size的cover和contain值中检索计算值。

阅读更多：CSS 教程

背景尺寸属性

在CSS中，background-size属性用于设置背景图片的大小。它有两个常见的值：cover和contain。

cover

当我们设置背景图片的大小为cover时，它会与容器保持完全不变形，并尽可能地填充容器，以便背景图片的宽度或高度与容器的宽度或高度相等。这可能会导致背景图片的一部分被裁剪掉。

contain

当我们设置背景图片的大小为contain时，它会调整背景图片的大小，以保持完全可见且不超出容器的范围。为实现这一点，背景图片可能会出现空白区域，以适应容器的宽度或高度。

计算值的检索

通过计算值，我们可以获取背景图片在设置为cover或contain时的实际大小。这对于进行后续的布局和设计操作非常有用。

使用JavaScript

我们可以使用JavaScript来检索计算值。以下是一个使用JavaScript编写的简单示例代码：

// 获取计算值函数
function getComputedStyleValue(element, property) {
  return getComputedStyle(element).getPropertyValue(property);
}

// 获取背景图片的计算宽度和高度
var backgroundImage = document.getElementById('myElement');
var backgroundWidth = getComputedStyleValue(backgroundImage, 'background-size').split(' ')[0];
var backgroundHeight = getComputedStyleValue(backgroundImage, 'background-size').split(' ')[1];

console.log('计算宽度：' + backgroundWidth);
console.log('计算高度：' + backgroundHeight);

在上面的代码中，我们首先定义了一个名为getComputedStyleValue()的函数，该函数通过传入元素和属性名称来获取计算值。然后，我们使用getElementById()函数获取包含背景图片的元素，通过getComputedStyleValue()函数检索背景图片的宽度和高度，并将其打印到控制台上。

使用CSS变量

CSS变量（也称为自定义属性）是一种用于存储计算值的强大工具。我们可以使用CSS变量来存储背景图片的计算宽度和高度。以下是一个示例代码:

:root {
  --background-width: 0px;
  --background-height: 0px;
}

#myElement {
  background-image: url('example.jpg');
  background-size: cover;
  width: var(--background-width);
  height: var(--background-height);
}

@media (min-width: 768px) {
  #myElement {
    --background-width: 600px;
    --background-height: 400px;
  }
}

@media (min-width: 1024px) {
  #myElement {
    --background-width: 800px;
    --background-height: 600px;
  }
}

在上面的代码中，我们首先定义了根部的CSS变量，用于存储背景图片的计算宽度和高度。然后，我们将背景图片的大小设置为cover，并设置元素的宽度和高度为CSS变量的值。通过在媒体查询中更新CSS变量的值，我们可以根据不同的视口宽度设置不同的背景图片大小。

示例说明

让我们通过一个实际示例进一步说明如何从background-size属性中检索计算值。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 500px;
      height: 300px;
      background-image: url('example.jpg');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="container"></div>
  <script>
    var container = document.querySelector('.container');
    var backgroundWidth = getComputedStyle(container).getPropertyValue('background-size').split(' ')[0];
    var backgroundHeight = getComputedStyle(container).getPropertyValue('background-size').split(' ')[1];

    console.log('计算宽度：' + backgroundWidth);
    console.log('计算高度：' + backgroundHeight);
  </script>
</body>
</html>

在上面的示例中，我们创建了一个包含背景图片的容器，并设置背景图片的大小为cover。通过使用getComputedStyle()函数获取计算值，我们可以通过将其打印到控制台来获取背景图片的计算宽度和高度。