css怎么把图片拉伸

对于网页设计来说，图片的展示是非常重要的。但有时候我们并不能获得完美大小的图片。这时CSS的拉伸功能就可以帮忙了。
如何拉伸图片？我们可以使用CSS中的background-size属性来完成。我们可以设置该属性为100% 100%。这样图片就可以按照自己的比例填满整个容器。
我们可以看下面的示例代码：

p {background-image: url("example.png");background-size: 100% 100%;width: 200px;height: 200px;}

在上面的例子中，我们给p标签设定了一个背景图，并且将背景图的大小设置为100% 100%。同时，p标签的宽度和高度都设定为200px。
这样，图片就会完整地展示在200px的范围内。如果你希望图片能够适应不同的容器大小，你也可以将宽度和高度设定为百分比。
我们再看一个示例代码，这次是将图片放在img标签中。

p {width: 200px;height: 200px;}img {width: 100%;height: 100%;object-fit: cover;}

在上面的例子中，我们先给p标签设定了宽度和高度，然后将img标签的宽度和高度设置为100%。这样，图片就会按照比例填满整个容器。
同时，我们还使用了object-fit属性。该属性可以设置图片在容器中的适应方式。cover表示拉伸图片以填满整个容器，而不关心图片的比例，可能会让图片变形。如果你希望保持图片的比例不变，你可以使用contain。
总之，拉伸图片在网页设计中是非常有用的功能。上面两个示例代码展示了两种不同的方式实现图片的拉伸。相信你已经学会了如何用CSS将图片拉伸了吧！

上一篇：css怎么将图片平移

下一篇：css怎么把字分开

---