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. 判断对象是否为null

    Person p=teacher as person; If (p!=null ) dostring (); 使用这样的方法效率高 使用 is时 进行两次判断效率低

  2. 【2017-07-03】CSS实现父级div透明,子集不透明。

    父级背景色 background: rgba(0, 0, 0, 0.5);

  3. STM32窗口看门狗WWDG库函数的一点思考

    WWDG当前计数器的值以及激活位和WWDG_CR这个寄存器相关.如下图所示: 而STM32f10x的库函数提供了两种设置WWDG_CR[0:6]位的方式. WWDG_SetCounter方法 #def ...

  4. PAT Basic 1055 集体照 (25 分)

    拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每排人数为 /(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排中最高者站中间(中间位 ...

  5. 2018 ICPC上海大都会赛重现赛 D Thinking-Bear magic (几何)

    2018 ACM 国际大学生程序设计竞赛上海大都会赛重现赛 D Thinking-Bear magic (几何) 链接:https://ac.nowcoder.com/acm/contest/163/ ...

  6. Hadoop添加LZO压缩支持

    启用lzo的压缩方式对于小规模集群是很有用处,压缩比率大概能降到原始日志大小的1/3.同时解压缩的速度也比较快. 安装 准备jar包 1)先下载lzo的jar项目https://github.com/ ...

  7. C# 对Outlook2010进行二次开发

    第一步:添加新项目 第二步:添加新的页签,注意,此页签是显示到Outlook主界面的 第三步:添加自己想要的文本框以及按钮 第四步:如果你想将此界面显示到主界面的话,需要这样设置:属性里面的Ribbo ...

  8. npm常规操作

    1.如果想在当前文件下创建package.json,只要在当前目录下执行npm init 2.如果执行过程中缺少依赖,有两种途径 ①安装全局 npm install -g express ②在当前工程 ...

  9. Angular4的dom事件

    Angular4的dom事件 差值表达式和属性绑定其实是一样的(例) <!-- 这两个是一样的效果,使用哪个都可以 --> <img src="{{imgUrl}}&quo ...

  10. UPS电源运用在数据中心,有什么优势?

    UPS电源是每个数据中心为了保证服务器与计算设备不被电力线干扰与电能质量问题所影响的设备. 1.电源选择 运用在线式或是后备式UPS电源,均需依照微机设备的需求与经济条件所决定.若是经济条件相对较好, ...