CSS中的background-size属性详解|极客教程

CSS中的background-size属性详解

CSS中的background-size属性用于定义背景图片的大小，常见的属性值有cover和contain。本文将重点讨论contain属性，探讨其具体含义以及在实际开发中的应用。

一、`contain`属性的含义

contain属性的含义是让背景图片完全包含在容器内，保持图片的纵横比例不变。如果容器比背景图片要大，那么图片将以原始尺寸显示在容器内；如果容器比背景图片要小，那么图片将按照容器的大小进行缩放，以保证整个图片都能显示在容器内。

二、`contain`属性的用法

在CSS中，可以通过如下的方式来使用contain属性：

.element {
    background-image: url('example.jpg');
    background-size: contain;
}

在上述代码中，我们为元素.element设置了一个背景图片example.jpg，并且指定了background-size: contain，即使用contain属性来定义背景图片的大小。

三、`contain`属性的实际应用

1. 图片展示

contain属性通常用于展示背景图片，特别是一些需要完整展示图片的情况。比如，我们有一个容器宽度为300px，高度为200px，需要展示一张宽度为500px，高度为400px的图片。这时可以使用contain属性来保证图片完整显示在容器内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contain Property Example</title>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background-image: url('example.jpg');
            background-size: contain;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
</html>

上述代码中，我们创建了一个容器.container，并设置了宽度和高度分别为300px和200px，背景图片为example.jpg，并使用contain属性来展示图片。当容器比图片小的时候，图片将会按照容器大小进行缩放，以保证完整显示在容器内。

2. 网页背景

contain属性也可以用于设置网页的背景图片，使得背景图片能够完全展示，并且在不同大小的屏幕上都能够正常显示。一般来说，网页背景都会采用cover或者contain来控制图片的展示效果。

body {
    background-image: url('background.jpg');
    background-size: contain;
    background-repeat: no-repeat;
}

上述代码中，我们为网页的body元素设置了背景图片background.jpg，并使用contain属性来展示背景图片。这样无论用户使用何种设备打开网页，背景图片都能保持完整展示。

四、总结

contain属性是CSS中用于定义背景图片大小的一个重要属性之一。通过合理地运用contain属性，可以确保图片在容器内完整显示，并且在不同大小的容器或屏幕上都能够正常展示。

CSS中的background-size属性详解