css 设置图片根据分辨率拉伸
在进行网页建造的过程中，图片和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空间，就需要设置布景图的
background-size: 100% 100%; 从运行结果可以看出，确实实现了按照分辩率主动拉伸的结果
- 发表于 2019-06-10 00:38
- 阅读 ( 813 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章