LV03-Markdown-03-图片

发表于 分类于 本文字数： 858 阅读时长 ≈ 3 分钟

本文主要是Markdown基本语法——图片的相关笔记，若笔记中有错误或者不合适的地方，欢迎批评指正😃。

点击查看使用工具及版本
Windows windows11
Ubuntu Ubuntu16.04的64位版本
VMware® Workstation 16 Pro 16.2.3 build-19376536
点击查看本文参考资料
参考方向 参考原文
------
点击查看相关文件下载
--- ---

主要讲述Markdown中图片的基本引用、缩放和对齐。

一、缩放

1. 原图

1
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image.png"/>

实际效果如下：

2. 定义宽和高来实现缩放

html
1
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-16871809879543.png"  width=100  height=60/>

实际效果如下：

3. 百分比确认缩放

html
1
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-16871810226416.png"  width=20%  height=20% />

实际效果如下：

二、位置确定

1. 居中

html
1
2
3
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-16871810874909.png"  width=20%  height=20% />
<!-- 或者加上 align 标签 -->
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-16871810874909.png"  width=20%  height=20% align="center"/>

2. 左对齐

html
1
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-168718112152912.png"  width=20%  height=20% align="left"/>

3. 右对齐

html
1
<img src="https://fanhua-picture.oss-cn-hangzhou.aliyuncs.com/03%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/LV03-Markdown-03-%E5%9B%BE%E7%89%87/img/001The original image-168718122523415.png"  width=20%  height=20% align="right"/>