项目环境:
Window10,Edge123.0.2420.65
问题描述:
当我在CSDN写博文的时候,会经常插入一些图片,但有时候我插入的图片太大了,影响了整体排版。
比如我加入了一张图片,就变成了下面这个样子,看起来很不舒服,太大了,还不居中。
原因分析:
一般情况下,在CSDN中插入的图片都是默认格式。
上传图片到文章时,图片底部都会有一个URL链接,可能CSDN对这个链接进行了处理?
CSDN给出的上方图片URL:
https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_16,color_FFFFFF,t_70
通过对图片的URL链接进行修改知道了如下信息:
x-oss-process=image/watermark,代表了: 对图片进行处理,添加水印;
type_ZmFuZ3poZW5naGVpdGk,代表了:图片水印的格式类型为ZmFuZ3poZW5naGVpdGk,base64解码后是“fangzhengzhidao”,即方正字体;
shadow_10,代表了: 图片水印的文字阴影程度为10,可能是深度或者强度,没去认真研究;
text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,代表了:图片版权信息或来源链接,base64解码后为“https://blog.csdn.net/Suemagic”;
size_16,代表了: 图片水印的文字大小为16;
color_FFFFFF,代表了:图片水印的文字颜色为FFFFFF;
t_70代表了:图片水印的文字透明度为70;
解决:
CSDN对图片只进行了标准化的水印处理,那我们只能利用HTML/CSS格式引入链接进行图片的宽度调整
①利用HTML格式进行图片的宽度百分比width="30%"
调整
宽度调整1:
<img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="30%">
width="300" height="100"
②利用HTML格式进行图片的宽高数值width="300" height="100"
调整
宽度调整2:
<img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="300" height="190">
更多效果:
利用HTML/CSS格式引入链接对图片在文章中的位置进行调整,以及给图片备注
对图片的水印进行一个个性化操作
一、图片显示位置调整
①CSDN链接结尾带上#pic_left
(居左) 、 #pic_center
(居中)、#pic_right
(居右)
居右:
https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_16,color_FFFFFF,t_70#pic_right
②HTML格式加入center
(居中)、left
(居左)(没法居右,直接在img
标签里加入style="float: left
也是没有用的,但是依旧可通过上面的方法,在结尾加上#pic_right
来达到居右效果)
居中:
<center><img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="10%"></center>
③HTML格式加入img
标签,在URL链接结尾加上#pic_right
来达到居右效果
二、图片题注
①HTML格式加入img
标签,并在下方加入font
标签
题注1:
<center> <img src="https://img-blog.csdnimg.cn/20181228220902381.png" width="10%"> </center>
<center><b><font size ='3'>图1. 这是图1的题注</font></b></center></font>
<!--font size = '3',表示文字的大小为3-->
<!--当然也可以不要,直接用center-->
②HTML格式在您想要添加题注的图片的<img>
标签下方,添加一个<figcaption>
标签(<figcaption style="font-size: 20px;">
没办法更改字体大小)
题注2:
<img src="https://img-blog.csdnimg.cn/20181228220902381.png" alt="图片描述">
<figcaption>图2. 这是上面这张图的题注</figcaption>
三、图片水印修改(不知道字体格式)
①CSDN链接修改水印阴影
水印阴影修改:shadow_100
<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100" alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
②CSDN链接修改水印文字
水印文字修改:text_dnhaZVhpbjAy
<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_dnhaZVhpbjAy,size_48,color_eb3c70,t_100#pic_center" width="40%" alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
③CSDN链接修改水印文字大小
水印文字大小修改:size_48
<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100" alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
④CSDN链接修改水印文字颜色
水印文字颜色修改:color_eb3c70
<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100" alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
t_70代表了:图片水印的文字透明度为70;
⑤CSDN链接修改水印文字透明度
文字透明度修改:t_10
<img src="https://img-blog.csdnimg.cn/20181228220902381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_100,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1ZU1hZ2lj,size_48,color_eb3c70,t_100" alt="图片描述">
<figcaption>图3. 这是上面这张图的题注</figcaption>
希望本文对你安装Python的第三方库提供了帮助。
SueMagic wish you a happy coding~
有疑问可联系我。