css如何设置图片拉伸

发布时间：2021-04-23 10:18:48 来源：亿速云阅读：423 作者：小新栏目： web开发

这篇文章主要介绍了css如何设置图片拉伸，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

css设置图片拉伸的方法：首先创建一个html页面；然后HTML页面中添加一个div标签，并在标签内部添加一个img图片标签；接着在div的标签中，直接书写css的样式；最后对图片设置高宽都是100%即可。

打开vscode，创建一个html页面，用于演示css如何根据分辨率拉伸图片的设置。如果您没有vscode，使用其他html编辑器，甚至是文本文件都可以，只需要注意文件的后缀必须是.html

css如何设置图片拉伸

在测试页面的同级目录，添加一张演示图片，此处为了演示效果，图片的分辨率比较小

css如何设置图片拉伸

在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址为上一步添加的演示图片，在浏览器中打开这个测试页面，就可以看到图片呈现在了浏览器上

css如何设置图片拉伸

在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间

注意：此处直接将css样式写到标签中，叫做内联样式，与写到外面的css效果一样的

css如何设置图片拉伸

这个时候，想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。从浏览器的展示效果，可以看出图片拉伸，并填满了整个div空间

css如何设置图片拉伸

如果图片使用的是背景图，不是img标签的形式呢？如果所示，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间

css如何设置图片拉伸

如果想要背景图也拉伸填满整个div空间，就需要设置背景图的

background-size: 100% 100%; 从运行效果可以看出，确实实现了根据分辨率自动拉伸的效果

css如何设置图片拉伸

感谢你能够认真阅读完这篇文章，希望小编分享的“css如何设置图片拉伸”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!

向AI问一下细节

css如何设置图片拉伸

什么是css

猜你喜欢

最新资讯

相关推荐

相关标签