拉伸背景图像以适合 div

在前端开发中，我们常常需要为一个 div 设置一个背景图像。但是，有时候这个图像的尺寸并不和 div 的尺寸相符，那么怎么让这个图像适配 div 呢？本文将为大家介绍两种方法：拉伸和平铺。

拉伸

当背景图像的尺寸不够大时，我们可以使用拉伸的方式来让它适配 div。这种方法虽然会导致图像失真，但是它是一种快捷而简单的方式。下面是一个示例：

.div-with-bg {
    background-image: url("bg.jpg");
    background-size: cover;
}

在这个示例中，我们使用了 background-size: cover 属性来将背景图像拉伸到适合 div。cover 值的意思是尽可能大的将背景图像放入 div 并进行拉伸，以覆盖整个 div 的背景。

平铺

在某些情况下，拉伸背景图像会导致失真，这时我们可以使用平铺的方式来适配 div。下面是一个示例：

.div-with-bg {
    background-image: url("bg.jpg");
    background-repeat: repeat;
}

在这个示例中，我们使用了 background-repeat: repeat 属性来将背景图像进行平铺。repeat 值的意思是无限次平铺背景图像以适配整个 div。

总结：

• 当需要适配 div 时，我们可以使用拉伸或平铺的方式来调整背景图像尺寸。
• 拉伸会导致图像失真，但是使用起来简单方便。
• 平铺不会导致图像失真，但是需要注意背景图像的大小。