Markdown 调整图片位置与大小

文章目录0.前言1.图片语法格式2.调整图片位置2.1 居左2.2 居中2.3 居右3.调整图片大小3.1 等比缩放相对父级元素相对自身3.2 非等比缩放参考文献0.前言大咖好呀我是恋喵大鲤鱼。Markdown 是一种轻量级的标记语言设计用于将文本格式化为易于阅读和编写的格式。它广泛用于编写文档、博客文章、README 文件以及在网页上进行格式化文本展示。Markdown 的设计目标是简单、易读、易写同时又能够产生格式良好的输出。在使用 Markdown 编写文章时经常需要插入图片并对图片进行位置和样式的调整。本文介绍 Markdown 调整图片位置与大小的常用方法。1.图片语法格式插入图片后Markdown 表示图片的语法格式如下2.调整图片位置使用 Markdown 编写文档或博客时经常需要对图片的位置与尺寸进行调整。2.1 居左居左一般为常见 Markdown 编辑器放置图片的默认位置我们也可以显示设置图片居左。1方法一在 ULR 末尾添加位置标识。2方法二嵌入 HTML 代码。div alignleft img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png / /div2.2 居中1方法一添加位置标识。2方法二嵌入 HTML 代码。div aligncenter img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png / /div2.3 居右1方法一添加位置标识。2方法二嵌入 HTML 代码。div alignright img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png / /div3.调整图片大小3.1 等比缩放相对父级元素使用 img 标签表示图片时采用百分比形式只定义宽即可等比例缩放。注意宽度相对于图片所在父级窗口。img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width100% /相对自身如果您使用的 Markdown 编辑器支持 CSS 样式那么可以使用 CSS zoom 属性使图片相对于自身进行等比缩放。img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png stylezoom:50%; /遗憾的是大部分 Markdown 编辑器并不支持 CSS 样式比如 CSDN Markdown。一个通用可行的办法是指定宽或高的绝对数值但只指定其中一个。本文的示例图片尺寸为 481*279px那么设置图片宽度为 240px 或高度为 140px 即可将图片宽高等比缩小为原来的一半。img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width240 / # 或 img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png height140 /特定 Markdown 编辑器可能有自己的方法比如 CSDN Markdown 指定图片宽度或高度可实现等比缩放。宽度确定高度等比例的图片:  高度确定宽度等比例的图片: 3.2 非等比缩放可以利用 CSS 的属性transform:scale(x,y)和transform-origin:left top来完成非等比缩放。其中transform-origin:left top的作用是改变缩放的中心点位置为左上角而非默认的中心位置。img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png styletransform:scale(0.8,0.5);transform-origin:left top; /同样的大部分 Markdown 编辑器并不支持 CSS 属性。不过好在该种操作并不常见因为可能会导致图片变形。如果一定要宽高按照不同比例进行缩放那么可以计算好缩放后的宽高像素值采用指定宽高像素值来实现。img srchttps://i-blog.csdnimg.cn/blog_migrate/c6399f8f84b8620b533da4dfb3b17e35.png width384 height140 /特定的 Markdown 编辑器可能有自己的方法指定图片的宽高比如 CSDN 的 Markdown 编辑器指定带尺寸的图片图片链接最后一部分 60x60 表示图片的宽高均是 60 像素。注意等号前要有空格。参考文献知乎.markdown中插入图片怎么定义图片的大小或比例CSDN 问答.HTML 如何设置图片宽高分别为原宽高的不同比例简书.css的Transform详解