问题解决：写CSDN博文时图片大小不适应，不清晰，没法排版

项目环境：

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-->

图1. 这是上面这张图的题注

②HTML格式在您想要添加题注的图片的<img>标签下方，添加一个<figcaption>标签(<figcaption style="font-size: 20px;">没办法更改字体大小)

题注2：

<img src="https://img-blog.csdnimg.cn/20181228220902381.png" alt="图片描述">
<figcaption>图2. 这是上面这张图的题注</figcaption>

图2. 这是上面这张图的题注

---

三、图片水印修改（不知道字体格式）

①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>

图3. 这是阴影为10

图4. 这是阴影为100

②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>

图5. 这是https://blog.csdn.net/Suemagic

图6. 这是dnhaZVhpbjAy

③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>

图7. 这是文字大小为16

图8. 这是文字大小为48

④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>

图9. 这是文字颜色为纯白

图10. 这是文字颜色为松叶牡丹红

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>

图7. 这是文字透明度为100

图8. 这是文字透明度为10

---

希望本文对你安装Python的第三方库提供了帮助。
SueMagic wish you a happy coding~
有疑问可联系我。