[分享]css中如何让一张图片拉伸

在CSS中，我们可以使用backgroundsize属性来控制图片的尺寸大小，让图片拉伸或缩小展示。backgroundsize有两个值，分别是长度值和百分比值。首先，让我们来看看长度值。长度值可以是...

在CSS中，我们可以使用background-size属性来控制图片的尺寸大小，让图片拉伸或缩小展示。background-size有两个值，分别是长度值和百分比值。

首先，让我们来看看长度值。长度值可以是像素(px)、英寸(in)、厘米(cm)和毫米(mm)等单位。我们可以将长度值作为background-size的一个值来控制图片的宽和高。例如，我们将background-size设置为100px 50px，就表示让图片的宽度为100像素，高度为50像素。

div{
    background-image: url("图片路径");
    background-size: 100px 50px;
} 

接着，让我们来看看百分比值。百分比值是以包含它的容器大小为基础计算的。例如，如果我们将background-size设置为50% 50%，表示让图片的宽度和高度都为包含它的容器大小的50%。

div{
    background-image: url("图片路径");
    background-size: 50% 50%;
} 

如果我们只设置其中一个值，那么另一个值会自动按比例缩放。例如，我们将background-size设置为100% 时，表示让图片的宽度为容器的宽度，高度会按照原始比例自动缩放。

div{
    background-image: url("图片路径");
    background-size: 100%;
} 

同时，我们还可以将background-size设置为cover或contain值来控制图片的显示。cover表示让图片尽可能大地填充容器，并保持图片比例不变。contain表示让图片尽可能小地填充容器，并保持图片比例不变。

div{
    background-image: url("图片路径");
    background-size: cover;
} 

总的来说，在CSS中控制图片的大小非常灵活，我们可以根据需要选择不同的方法进行调整，让图片在我们的网站中展示得更美观。