Markdown:插入图片和图注

news/2025/1/21 10:14:11/

文章目录

  • 在Markdown中插入图片,调节位置,大小,以及插入图注。
  • 并排插入图片
  • 并排插入图片但无缝隙
  • 简单的插入可调整大小图片
  • 使用图床(腾讯云cos+picgo)

在markdown插入图片主要有两种方法,一个是使用markdown自身的语言格式,另一个是使用html语言格式。相比较而言,后者选择性更多,展示图片的功能更强大。

在Markdown中插入图片,调节位置,大小,以及插入图注。

<center><img style="border-radius: 0.3125em;box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" width = "300" height = "200"src="在这里插入图片地址" width = "60%" alt=""/><br><div style="color:orange; border-bottom: 1px solid #d9d9d9;display: inline-block;color: #999;padding: 2px;">在这里插入图片注释</div>
</center>
https://img-blog.csdnimg.cn/86c08fb9ae9741169cbcffbf8b9d1fc1.png

其中width = "60"可以将图片宽度(等比例)压缩为整页宽的60%。


孙红雷犬

并排插入图片

使用html语言中的标签

<figure class="half"><img src="https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png" title="Logo" width="300" /> <img src="https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png" title="Logo" width="300" />
</figure>
  • 并排插入图片并居中
<center class="half"><img src="https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png" title="Logo" width="300" /> <img src="https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png" title="Logo" width="300" />
</center>

并排插入图片但无缝隙

<center>![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png)![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162142968-297860512.png)
</center>

注意此时应该在<center>下面空一行。

简单的插入可调整大小图片

图片太大可能会失效。

![南瓜](https://img-blog.csdnimg.cn/e8e74a31052b4f19a11acb1ac1938b17.png?x_16#pic_center =300x300)

南瓜

使用图床(腾讯云cos+picgo)

注意不能使用,否则会出现警告:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eD7CAzo6-1654881859293)(https://picture-blog-1312401031.cos.ap-chongqing.myqcloud.com/202206100223617.svg)]

应该使用html格式的代码:

<center class="half"><img src="https://picture-blog-1312401031.cos.ap-chongqing.myqcloud.com/202206100223617.svg" title="Logo" width="400" /> 
</center>

http://www.ppmy.cn/news/357397.html

相关文章

html5图片并列排版,图片并列排版实现

一直想实现博客文章中图片并列排版,因为有些图片比较长如果单占一行就会很不好看,但奈何没有啥实现思路。前几天看到大佬熊猫小A的Typecho博客主题VOID中实现了这个功能。于是厚着脸皮看了大佬的HTML结构,花了一个下午的时间用JQuery模仿了出来(捂脸)。先展示一下最终效果:…

Python应用开发——爬取网页图片

Python应用开发——爬取网页图片 目录 Python应用开发——爬取网页图片前言1 爬取原理讲解1.1 查看网页源代码1.2 分析网页源码并制定对应的爬取方案1.3 完善爬取流程和细节 2 实战演练2.1 PyCharm下载安装2.2 安装相应依赖包(类库)2.3 编写代码2.4 补充细节和优化2.5 运行测试…

使用CSS设置背景图片,图片比较大,完全显示在一个DIV中

做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且放进去以后还不是响应式的 那么解决问题的就来了: back…

Python 比较俩张图片差异

对比俩张图片差异,可以用均方误差(MSE)与结构相似性指数(SSIM)函数。(Mean Squared Error vs. Structural Similarity Measure) 使用此方法,我们能够轻松确定两个图像是相同的还是由于轻微的图像操作,压缩伪像或有目的的篡改而有所不同。 尽管MSE的计算速度要快得多,…

python比较两张图片并获取精准度

先安装依赖库dlib、face_recognition、cv2 下载wheel文件&#xff1a; python3.6&#xff1a; dlib-19.7.0-cp36-cp36m-win_amd64.whl: https://drfs.ctcontents.com/file/1445568/768652503/68cb5d/Python/dlib-19.7.0-cp36-cp36m-win_amd64.whl python3.7: dlib-19.17.99-cp3…

Python 五种图片相似度比较方法

均值哈希算法 # -*- coding: utf-8 -*- import cv2 import numpy as np# Hash值对比 def cmpHash(hash1, hash2,shape(10,10)):n 0# hash长度不同则返回-1代表传参出错if len(hash1)!len(hash2):return -1# 遍历判断for i in range(len(hash1)):# 相等则n计数1&#xff0c;n最…

图片比较工具

sudo apt-get install imagemagick compare 239.png test_238.png ~/out.png

基于python的图片比较

基于Python的图片比较 原文地址 -How-To: Python Compare Two Images- 通过阅读作者原文&#xff0c;感觉文章通俗易懂&#xff0c;根据个人理解整理成中文&#xff0c;并不逐句翻译&#xff0c;因未找到原文图片&#xff0c;文末个人试验图片来自网络。 原文主要使用MSE(均…