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. linux centos安装nginx1.7.4

    原文转自 jerryhe326:https://www.cnblogs.com/jerrypro/p/7062101.html一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装ng ...

  2. DAY2新手选品原则及供应商选择

    一.新手选品原则(主要是为了起量) 1.净利润率高(容易起量) 2.发货方便,售后方便(发货,打包方便,不易破损,退货率低) 3.具有细分市场优势(衣服->古代衣服,论文排版) 4.市场规模够大 ...

  3. docker在Linux环境下的安装

    在Centos6.8上安装 一.查看系统版本 二.安装EPEL 因为系统自带的repo中不带docker需要安装epel rpm -Uvh http://dl.fedoraproject.org/pu ...

  4. python 学习笔记_1 pip安装、卸载、更新包相关操作及数据类型学习

    '''prepare_1 pip安装.卸载.更新组件type 各数据类型''' py -3 -m pip py -3 -m pip listpy -3 -m pip show nosepy -3 -m ...

  5. nginx 缓存区太小导致后台Connection reset by peer 报错

    问题概述:图片bit 64生成数据流太大,导致小程序分享弹窗的二维码图片生成失败 后台报错: 排查: Client------>nginx------->h5------>nginx ...

  6. 机器学习中的数学-强大的矩阵奇异值分解(SVD)及其应用

    版权声明: 本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用,但请注明出处,如果有问题,请联系wheeleast@gm ...

  7. 一个基于TCP/IP的小项目,实现广播消息的功能。(超详细版)

    1.结合现状 功能分析 该功能基于上个项目的改进,主要是通过对服务器端代码的修改,以及对客户端作少许修改,实现开启多客户端时,一个客户端发送消息,达到对所有客户端广播的效果.可参考网吧里的点歌系统,比 ...

  8. vue-cli3 clone项目后如何安装插件及依赖模块启动项目

    一. 前提条件1.确保使用的是Node 8.11.0+和NPM 3+:2.确保已全局安装vue-clie3:npm install -g @vue/cli: 二.安装依赖 1.在安装依赖之前,先安装官 ...

  9. 09—mybatis注解配置join查询

    今天来聊mybatis的join查询,怎么说呢,有的时候,join查询确实能提升查询效率,今天举个left join的例子,来看看mybatis的join查询. 就不写的很细了,把主要代码贴出来了. ...

  10. 重构CMDB,避免运维之耻

    CMDB,几乎是每个运维人都绕不过去的字眼,但又是很多运维人的痛,因为CMDB很少有成功的,因此我也把它称之为运维人的耻辱. 那么到底错在哪儿了?该如何去重构它? 今天我想从我的角度来和大家探讨一下业 ...