问题解决：写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

Anaconda Prompt

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