0. 前言

最近写 md 文章的时候发现,在 markdown 里插入一些很长的图片的时候,会显得很不好看,于是去查了一下如何实现 markdown 里图片的并排显示,参考了各个博客内的内容和 markdown 文档,了解 markdown 支持一些 html 的标签,下面用 <img> 实现对图片的简单处理。

1. 单张居中显示

123456789
<center>    <img src="http://dreamofbook.qiniudn.com/Zero.png"></center>

OR

<figure>    <img src="http://xxx.jpg"></figure>

2. 固定图片宽度 / 高度:

<img src="http://xxx.jpg" title="Logo" width="100" />

宽度是 Width,高度是 High。Title 为图片描述。

3. 两张并排显示:

123
<figure class="half">    <img src="http://xxx.jpg"><img src="http://yyy.jpg"></figure>

4. 三张并排显示:

123
<figure class="third">    <img src="http://xxx.jpg"><img src="http://yyy.jpg"><img src="http://zzz.jpg"></figure>

5. 固定宽度,并排显示并居中

就是把上面的几个例子和起来,下面给出代码

123
<center class="half">    <img src="http://xxx.jpg" width="300"/><img src="http://yyy.jpg" width="300"/></center>

2019-05-03

Markdown 图片的简单处理的更多相关文章

  1. Markdown 图片助手-MarkdownPicPicker

    title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...

  2. thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法

    这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...

  3. Github Markdown 图片如何并排显示

    Github Markdown 图片如何并排显示   要一张图片接着一张图片的写,中间不能有换行.如果换行的话则图片也换行 正确的写法: ![描述](图片链接)![描述](图片链接)![描述](图片链 ...

  4. markdown图片转换demo

    markdown图片转换demo 一直以来都是用Markdown来写博客的,但是它的图片嵌入实在是太让人头秃,逼得我能找网上的图片就不用自己的,实在是麻烦.所以我在发现了一个可以生成markdown样 ...

  5. u-tools图床便捷生成markdown图片

    u-tools 图床 上传图片生成markdown图片非常便捷. 支持的图片服务器有几种,其中搜狗.网易和掘金的加载速度更快些: 也可以用阿里与和腾讯云的OSS; 其中网易生成图片不是原图尺寸好像被改 ...

  6. 如何实现一个 markdown 图片粘贴上传的博客后台系统

    如何实现一个 markdown 图片粘贴上传的博客后台系统 js 实现 drag & drop / copy & paste image uploader MongoDB 设计文档对象 ...

  7. 调整markdown 图片大小和对齐方式

    [博客园]调整markdown 图片大小和对齐方式 图片大小 例 <img src="https://img2020.cnblogs.com/blog/2199257/202101/2 ...

  8. Hexo + VSCode 插入 Markdown 图片解决办法

    最近打开 typora 时发现弹窗强更,不让用 beta 版了 想到自己并不是非常需要 WYSIWYG,而且也不是经常使用 typora,于是直接退回到 VSCode 了,而且在 VSCode 里可以 ...

  9. LZ77压缩算法编码原理详解(结合图片和简单代码)

    前言 LZ77算法是无损压缩算法,由以色列人Abraham Lempel发表于1977年.LZ77是典型的基于字典的压缩算法,现在很多压缩技术都是基于LZ77.鉴于其在数据压缩领域的地位,本文将结合图 ...

随机推荐

  1. C和指针--命令行参数

    1.命令行参数 C程序的main函数具有两个形参,第1个通常称为argc,它表示命令行参数的数目.第2个称为argv,它指向一组参数值.由于参数的数目并没有内在的限制,所以argv指向这组参数值(本质 ...

  2. sed & awk 概述

    概述 一般情况下,从grep到sed和awk的学习过程是很自然的.sed和awk是一般用户.程序员和系统管理员们处理文本文件的有力工具. sed的名字来源于其功能,它是个字符流编辑器(stream e ...

  3. Python使用selenium模拟点击,进入下一页(三)

    嗯,昨天呢,我们已经实现了自动输入百度然后搜索Cgrain,然后点击按钮,进入我的页面,在这里呢,有个问题 ActionChains(seleniumGoo).move_by_offset(-480, ...

  4. FreeRTOS列表和列表项

    FreeRTOS中的列表和列表项类似于数据结构中的链表和节点: 相关的文件是list.c和list.h两个文件: List_t列表结构体 具体定义如下: /* * Definition of the ...

  5. IIS搭建ASP站点

    1. 进入控制面板悬着打开或者关闭Windows功能. 2. 手工选择需要的功能进行安装. 3. 打开运行Internet信息服务(IIS)管理工具. 4. 展开左侧栏看到“Default Web S ...

  6. 导弹拦截( 二分+dilworth定理)

    https://www.luogu.org/problemnew/show/P1020 原题 接下来是dilworth定理 https://blog.csdn.net/u011676717/artic ...

  7. How Many Answers Are Wrong(带权并查集)

    题目 带权并查集的博客~ 题目: 多组输入数据.n,m.你不知道[1,n]内任意区间内值的和. m次询问,a b 是端点,都在n的范围以内 : v表示 [a,b]的区间内值的和.对每次询问,判断v是否 ...

  8. 【SCOI2007】降雨量

    新人求助,降雨量那题本机AC提交WAWAWA…… 原题: 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小 ...

  9. JS export 异步导出

    function getUrl () { req().then(res => { console.log(res); }).catch(err => { console.log(err); ...

  10. Nginx防盗链模块ngx_http_referer_module

    ngx_http_referer_module⽤用来阻⽌止Referer⾸首部⽆无有效值的请求访问,可防⽌止盗链指令:12.1 valid_referers定义 referer ⾸首部的合法可⽤用值, ...