CSS图片铺满div

在Web开发中，有时候我们希望将一张图片完全铺满一个元素，通常情况下，最简单的方法就是使用CSS的background-size属性来实现。本文将详细介绍如何使用CSS来实现让图片铺满一个div元素。

CSS的`background-size`属性

在CSS中，background-size属性可以用来控制背景图片的大小，这个属性可以接受不同的值：

auto: 保持图片的原始大小
cover: 图片保持纵横比例不变，铺满整个元素，可能会被裁剪
contain: 图片保持纵横比例不变，完全包含在元素内部

实现图片铺满div

首先，我们需要一个HTML结构来展示div和图片：

<!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>Full Background Image</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="image"></div>
    </div>
</body>
</html>

然后，我们需要一些CSS样式来定义div和图片的样式：

body {
    margin: 0;
    padding: 0;
}

.container {
    width: 100vw; /* 将div宽度设置为屏幕宽度 */
    height: 100vh; /* 将div高度设置为屏幕高度 */
}

.image {
    width: 100%;
    height: 100%;
    background-image: url('image.jpg'); /* 设置背景图片的路径 */
    background-size: cover; /* 图片铺满整个div */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 设置图片在div中的位置 */
}

在上面的代码中，我们给.container设置了宽度100vw和高度100vh，这样就可以让div铺满整个屏幕。然后在.image中设置了背景图片的路径，并使用background-size: cover;来让图片铺满整个div。