Markdown 编辑器如何修改图片大小

148 字

1 分钟

– 次浏览

– 位访客

Markdown 编辑器如何修改图片大小

2026-03-31

技术专栏

Markdown

教程

文档编辑

前端开发

AI 摘要

本文针对 Markdown 原生语法不支持调整图片大小的问题，提供了三种解决方案：1. 嵌入 HTML `<img>` 标签并设置 width/height 属性；2. 在图片链接后直接追加 CSS 样式（需编辑器支持）；3. 在文章头部编写 `<style>` 标签实现全局或局部图片的批量尺寸控制。

方法一、嵌入HTML代码#

1.1 使用 img标签#

1
<img src="./xxx.png" width = "300" height = "200" alt="图片名称" align=center />

1.2 如果需要居中的话只要在外面包围div标签即可#

1
<div align="center"> ... </div>

方法二、直接在图片后面加上对应的CSS样式即可#

1
![test image size](url){:class="img-responsive"}
2
![test image size](url){:height="50%" width="50%"}
3
![test image size](url){:height="100px" width="400px"}

方法三、一劳永逸通用思路#

在文章头部添加：

1
<style>
2
img{
3
    width: 60%;
4
    padding-left: 20%;
5
}
6
</style>

这个对文章所有图片都有效，如果图片尺寸标准差异过大，建议还是用单独的标签来定义。

Markdown 编辑器如何修改图片大小

https://blog.142588.xyz/posts/markdown系列markdown-编辑器如何修改图片大小/

作者

Watch Your Back

发布于

2026-03-31

许可协议

CC BY-NC-SA 4.0

为 Astro 加上在新标签页打开链接的功能

常见电脑架构与软件选择指南

方法一、嵌入HTML代码

1.1 使用 img标签

1.2 如果需要居中的话只要在外面包围div标签即可

方法二、直接在图片后面加上对应的CSS样式即可

方法三、一劳永逸通用思路