markdown上传csdn调整插入图片大小及位置

大聪明_花

已于 2023-10-20 21:20:43 修改

阅读量309

点赞数 2

分类专栏： MarKdown 文章标签： python

于 2023-10-18 14:51:06 首次发布

本文链接：https://blog.csdn.net/m0_73689941/article/details/133906022

版权

MarKdown 专栏收录该内容

2 篇文章

订阅专栏

文章目录

前言
1 csdn插入图片
- 1.1 <img 不显示图片？不能使用？
2 csdn 带尺寸的图片
3 csdn 移动图片位置并且带尺寸

前言

关于 markdown上传csdn 无法显示本地图片的问题请看我的另一篇文章【2023最新教程】解决markdown上传csdn无法显示本地图片的问题
本文章讲叙了自己在markdown上传csdn 中图片的大小以及位置的问题
我的图片全部都是url类型的，因为如果不是的话，上传图片会失败
但是在上传的过程中，我发现在Typora中的调整图片大小的方法
在csdn中不能用，csdn不支持 style=“zoom: 50%;” 这种方法

结合csdn客服给的，总结出来的两种方法插入图片的方法

1 csdn插入图片

图片:
 ![Alt](https://img-home.csdnimg.cn/images/20220524100510.png)
 <img src="url.png" alt="image" />

1.1 <img 不显示图片？不能使用？

Alt
这是因为csdn还没有加载图片，<img 是html，加载渲染到csdn需要点时间，并不是不能使用<img 方法，需要等待，具体的还是要看自己的网络环境
Alt

推荐大家使用这种，因为这种加载快

! [ 名称 ]（图片网址）

2 csdn 带尺寸的图片

带尺寸的图片:
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =60x60)
<img src="https://img-home.csdnimg.cn/images/20220524100510.png" alt="image" width='60px' height='60px' />

宽度确定高度等比例的图片宽度确定高度等比例的图片: 
![Alt](https://imghome.csdnimg.cn/images/20220524100510.png =60x)
<img src="https://img-home.csdnimg.cn/images/20220524100510.png" alt="image" width='60%' />

高度确定宽度等比例的图片: 
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png =x60)
<img src="https://img-home.csdnimg.cn/images/20220524100510.png" alt="image" height='60% />

注意：
在Typora里不支持  =60x60 这种调整图片大小的方式
url 后面要跟 空格 
x 是小写的字母x

3 csdn 移动图片位置并且带尺寸

居中的图片: 
![Alt](https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center)
<img src="https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center" alt="image"/>

居右的图片: 
![Alt](https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right)
<img src="https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right" alt="image"/>

居中并且带尺寸的图片: 
![Alt](https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center =60x60)
![Alt](https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center =x100)
![Alt](https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center =100x)
<img src="https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center" alt="image" width='60px' height='60px' />

居右并且带尺寸的图片: 
![Alt](https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right =100x)
![Alt](https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right =x100)
![Alt](https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right =100x)
<img src="https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right " alt="image" width='60px' height='60px' />

注意：
#pic_center 是直接在url后面跟上的
=60x60 是在url后面的空格后面
x 是小写的字母x

展示：

居中并且带尺寸的图片:

![Alt](https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center =100x100)

Alt

<img src="https://i-blog.csdnimg.cn/blog_migrate/b7763a1c190584f71e6e5e0e87f73787.png#pic_center" alt="image" width='100px' height='100px' />

居右并且带尺寸的图片:

[Alt](https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right =100x)

Alt

<img src="https://i-blog.csdnimg.cn/blog_migrate/784d5e75e9f2c73b7fd997336bbf585c.png#pic_right " alt="image" width='20%'/>