在进行网页建造的过程中 ， 图片和css样式 ， 是经常利用到的两种形式 。 那么 ， 若何经由过程css设置图片按照分辩率拉伸呢？
需要这些哦
vscode
方式/
1打开vscode ， 建立一个html页面 ， 用于演示css若何按照分辩率拉伸图片的设置 。 若是您没有vscode ， 利用其他html编纂器 ， 甚至是文本文件都可以 ， 只需要注重文件的后缀必需是.html
文章插图
2在测试页面的同级目次 ， 添加一张演示图片 ， 此处为了演示结果 ， 图片的分辩率比力小
文章插图
3在测试页面中添加一个div标签 ， 在标签内部添加一个img图片标签 ， 设置图片的src地址为上一步添加的演示图片 ， 在浏览器中打开这个测试页面 ， 就可以看到图片呈此刻了浏览器上
文章插图
4在div的标签中 ， 直接书写css的样式 ， 设置div的宽度为500像素 ， 高度为300像素 ， 边框为1像素的红色框 。 再次在浏览器中打开 ， 就可以看到图片 ， 并没有填满整个div的空间
注重：此处直接将css样式写到标签中 ， 叫做内联样式 ， 与写到外面的css结果一样的
文章插图
5这个时辰 ， 想要让图片布满整个div ， 只需要对图片设置高宽都是100%即可 。 此处为了演示 ， 将所有的img标签都设置当作了100% ， 并且 ， 利用的是外部css的书写形式 。 从浏览器的展示结果 ， 可以看出图片拉伸 ， 并填满了整个div空间
文章插图
6若是图片利用的是布景图 ， 不是img标签的形式呢？若是所示 ， 图片默认会在x和y轴反复 ， 并不会拉伸 ， 最终仍然填满了这个div的空间
文章插图
7若是想要布景图也拉伸填满整个div空间 ， 就需要设置布景图的
【css 设置图片根据分辨率拉伸】background-size: 100% 100%; 从运行结果可以看出 ， 确实实现了按照分辩率主动拉伸的结果
文章插图
以上内容就是css 设置图片根据分辨率拉伸的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 设置Excel单元格颜色以便突出显示
- 如何利用手机QQ给图片打马赛克
- 爱奇艺杜比怎么设置
- 怎样设置ppt幻灯片切换效果
- PowerPoint中如何设置页面版式
- Word段前段后间距的设置
- Word如何设置字体效果
- WPS中PPT如何设置背景填充效果？
- 怎样在Word文档中设置文本框填充效果
- 如何把图片设置成四周型环绕？