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. 连接MySQL报错误代码 ERROR 1045时的解决方案

            最近在做网站迁移的时候,遇到了一件很尴尬的事情,远程连接数据连不上了,一直报 错误号码1045 Access denied for user 'root'@xx.xxx.xxx.xx( ...

  2. 一个基于Scrapy框架的pixiv爬虫

    源码 https://github.com/vicety/Pixiv-Crawler,功能什么的都在这里介绍了 说几个重要的部分吧 登录部分 困扰我最久的部分,网上找的其他pixiv爬虫的登录方式大多 ...

  3. Java学习第三天之注释

    编写程序时,总需要为程序添加一些注释,用以说明某段代码的作用,或者说明某个类的用途.某个方法的功能,以及该方法的参数和返回值的数据类型及意义等. 一.为什么要添加注释? (1)便于自己理解:有些人可能 ...

  4. Python中的对象与参考

    参考 当创建一个对象并给它赋一个变量的时候,这个变量仅仅参考哪个对象,而不是表示这个对象本身!也就是说,变量名指向你计算机中存储那个对象的内存.这被称作名称到对象的绑定. 对象与参考的例子 注意两次不 ...

  5. 用js刷剑指offer(合并两个排序的链表)

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 牛客网链接 js代码 /*function ListNode(x){ this.val = x; ...

  6. Octave基本语法

    基本运算 octave:3> 5+6 ans = 11 octave:4> 3-2 ans = 1 octave:5> 8*9 ans = 72 octave:6> 8/4 a ...

  7. Ubuntu系统---终端下用g++进行c++项目

    Ubuntu系统---终端下用g++进行c++项目 目录 一.编译工具(g++/gcc)和编辑工具(vim/gedit)二.C语言 的编译与运行三.C++语言 的编译与运行四.gcc/g++的详细过程 ...

  8. 从头至尾一点点实现自己的ViewPager效果

    对于ViewPager,应该没有人在项目中没使用过它,效果非常的赞,使用也非常简单,但是如果自己来实现这样的效果,我想并非三下五除二的事了,这里涉及到怎么自定义ViewGroup了,它相比自定义Vie ...

  9. mysql运维相关

    1.为什么要分库分表(设计高并发系统的时候,数据库层面该如何设计)?用过哪些分库分表中间件?不同的分库分表中间件都有什么优点和缺点?2.现在有一个未分库分表的系统,未来要分库分表,如何设计才可以让系统 ...

  10. 7、Spring Boot 2.x 集成 Redis

    1.7 Spring Boot 2.x 集成 Redis 简介 继续上篇的MyBatis操作,详细介绍在Spring Boot中使用RedisCacheManager作为缓存管理器,集成业务于一体. ...