css 设置图片根据分辨率拉伸

 时间:2024-10-21 15:10:14

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

css 设置图片根据分辨率拉伸

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

css 设置图片根据分辨率拉伸

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

css 设置图片根据分辨率拉伸

7、如果想要背景图也拉伸填满整个div空间,就需要设置背景图的background-size: 100% 100%; 从运行效果可以看出,确实实现了根据分辨率自动拉伸的效果

css 设置图片根据分辨率拉伸
  • wps文档里怎么插入运动型摘要文本框
  • matlab关于程序进度条的介绍
  • Album Designer PCB两个点连不到一起怎么办
  • teamviewer如何转为永久?
  • MATLAB常用信号产生函数
  • 热门搜索
    青藏线旅游攻略 深圳的旅游景点 恒大世纪旅游城 去三亚旅游多少钱 成都旅游攻略自助游 长沙旅游团 旅游资讯网 三亚旅游住宿攻略 北京自助旅游 厦门曾厝埯旅游攻略