在div盒子中想要展示一张图片,我们可以使用style样式来设置width或者height中的某一项,即style="width:100px",这时另一项就会自适应变化,按比例变化。学习犹如逆水行舟,不进则退

前端 img标签显示 base64格式的图片

1. 图片自适应大小变化

      在设置网页的整个背景图片时,我们可以在css中的使用background-size:100%来铺满整个页面,也可以设置为其它的百分比数值来局部铺HTML页面。

1
2
3
4
5
6
body{

background-image: url("../public/images/5927f2c7269aa.jpg");
background-attachment: fixed;
background-size: 100%;
}

      在div盒子中想要展示一张图片,我们可以使用style样式来设置width或者height中的某一项,即style="width:100px",这时另一项就会自适应变化,按比例变化。

      我来举一个例子说明,也可以总结出一个公式,以后若固定了width或height中的某一项,另一项也就会求出来:

1
2
<a href="#"><img src="../public/images/5d5e5c7d1e1b8.jpg"  style="width: 100px" /></a>
<!--引入的图片的原分辨率为1920*1080-->

style="width: 100px":将引入的图片的宽度固定为100px;此时height就会自适应变化。

由上图可知,图片已经自适应变化了,height:56.25px,这个数字是怎么得出来的?
width:1920--->100
heidth:1080 --->56.25    因为:1080/(1920/100)=56.25px

2.前端 img标签显示 base64格式的图片

前端img标签想要展示base64编码的图片,只需要在html中加上(这种方法不兼容IE6/7,使用时要注意!)

1
<img src="data:image/jpg;base64,图片数据" alt=""/>

更多格式:

data:,文本数据

data:text/plain,文本数据

data:text/html,HTML代码

data:text/html;base64,base64编码的HTML代码

data:text/css,CSS代码

data:text/css;base64,base64编码的CSS代码

data:text/javascript,Javascript代码

data:text/javascript;base64,base64编码的Javascript代码

data:image/gif;base64,base64编码的gif图片数据

data:image/png;base64,base64编码的png图片数据

data:image/jpeg;base64,base64编码的jpeg图片数据

data:image/x-icon;base64,base64编码的icon图片数据


 评论

联系我 | Contact with me

Copyright © 2019-2020 谁知你知我,我知你知深。此恨经年深,比情度日久

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议