CSDN markdown 编辑博文时 设置图片的宽高

本文只是 mark 一下。
之前添加的图片都太大太蠢了，影响阅读体验。
原来 CSDN markdown 编辑已经支持「设置图片的宽高」。

本文适用于「在 CSDN 用 Markdown 编辑博客」的博主。

1. 原始效果（未设置宽高）

如果在手机上看下面这张图，需要横屏才能看到实际效果。因为手机竖屏时屏幕宽度比图片的宽度小，图片被二次压缩到与屏幕等宽，看不到对比的效果了。

先看未设置宽高的效果图，图片铺满屏幕的宽度，高度随等比例缩放：

上面这张图的 markdown 写法是

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1dd39ca8531284c9eb3a368ad83893d1.jpeg#pic_center)

2. 设置宽高尺寸（例如，添加 =宽度x高度）

还是用上面的 markdown 写法，只是在最后加上 =500x300 这种形式的宽度和高度，单位是像素 px。

Markdown 的写法是：
在括号的最后，添加了 =500x300，需要注意的是，这前面有个空格。#pic_center =500x300 这样空格看起来更清楚一些。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1dd39ca8531284c9eb3a368ad83893d1.jpeg#pic_center =500x300)

生成的 HTML 中的 img 标签，如下：
可以看到 width="500" height="300"。从这里，也可以得到启发，比如 width 是可以用百分比来表示的（%）。

<img src="https://i-blog.csdnimg.cn/blog_migrate/1dd39ca8531284c9eb3a368ad83893d1.jpeg#pic_center" alt="在这里插入图片描述" width="500" height="300">

这种方式的缺点是，需要控制好宽度和高度的比例，否则会比例失调。改进的方法是，只设置宽度，高度自动等比例调整。

3. 改进：只设置宽度（例如，添加 =宽度x）

需要注意的是，=宽度x 这里的 x 是需要的，不能省略。

直接上效果图和 Markdown 代码：

采用 =500x ，即设置宽度为 500，高度不设置（自动等比例调整）。

Markdown 代码：

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1dd39ca8531284c9eb3a368ad83893d1.jpeg#pic_center =500x)

4. 采用百分比形式的宽高 （例如，添加 =50%x50% 或 =50%x）

效果：

Markdown 代码：
可以看到 #pic_center =50%x50%，其实，也是可以只设置宽度，例如 =50%x 这样是可以的。

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1dd39ca8531284c9eb3a368ad83893d1.jpeg#pic_center =50%x50%)

5. 图片的位置 （#pic_center，#pic_left，#pic_right）

• 居右，显示为原图的 50%，markdown 为 #pic_right =50%x

• 居左，显示为原图的 60%：#pic_left =60%x

6. 参考

CSDN Markdown 帮助

https://www.w3school.com.cn/tags/tag_img.asp

本文中的「ShortcutHelper」是一个辅助访问 Android/data 目录的 app，更多内容请移步
Android 11 中访问 Android/data 目录的几种方式