Markdown 图片的简单处理
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> |
•
Markdown 图片的简单处理的更多相关文章
- Markdown 图片助手-MarkdownPicPicker
title: Markdown 图片助手 v0.1 toc: true comments: true date: 2016-06-04 16:40:06 tags: [Python, Markdown ...
- thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
这篇文章主要介绍了thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法,结合简单示例形式分析了thinkPHP5框架验证码相关配置.后台验证.前台刷新等操作技巧,学习thinkphp源码的朋 ...
- Github Markdown 图片如何并排显示
Github Markdown 图片如何并排显示 要一张图片接着一张图片的写,中间不能有换行.如果换行的话则图片也换行 正确的写法: ![描述](图片链接)![描述](图片链接)![描述](图片链 ...
- markdown图片转换demo
markdown图片转换demo 一直以来都是用Markdown来写博客的,但是它的图片嵌入实在是太让人头秃,逼得我能找网上的图片就不用自己的,实在是麻烦.所以我在发现了一个可以生成markdown样 ...
- u-tools图床便捷生成markdown图片
u-tools 图床 上传图片生成markdown图片非常便捷. 支持的图片服务器有几种,其中搜狗.网易和掘金的加载速度更快些: 也可以用阿里与和腾讯云的OSS; 其中网易生成图片不是原图尺寸好像被改 ...
- 如何实现一个 markdown 图片粘贴上传的博客后台系统
如何实现一个 markdown 图片粘贴上传的博客后台系统 js 实现 drag & drop / copy & paste image uploader MongoDB 设计文档对象 ...
- 调整markdown 图片大小和对齐方式
[博客园]调整markdown 图片大小和对齐方式 图片大小 例 <img src="https://img2020.cnblogs.com/blog/2199257/202101/2 ...
- Hexo + VSCode 插入 Markdown 图片解决办法
最近打开 typora 时发现弹窗强更,不让用 beta 版了 想到自己并不是非常需要 WYSIWYG,而且也不是经常使用 typora,于是直接退回到 VSCode 了,而且在 VSCode 里可以 ...
- LZ77压缩算法编码原理详解(结合图片和简单代码)
前言 LZ77算法是无损压缩算法,由以色列人Abraham Lempel发表于1977年.LZ77是典型的基于字典的压缩算法,现在很多压缩技术都是基于LZ77.鉴于其在数据压缩领域的地位,本文将结合图 ...
随机推荐
- python实践总结与反思
2019.6.20 python近期实践总结与反思 记录一些这两天python犯的一些低级却易犯的错误.千万不要犯第二次啊!! 1. py文件名字问题 py文件命名不能和调用的模块名一样! 比如,我要 ...
- Linux学习笔记(六)Linux常用命令:关机、重启以及系统运行级别
一.shutdown命令 shutdown [选项] [时间] 常用选项 -c 取消前一个关机命令 -h 关机 -r 重启 shutdown命令关机或重启会保存当前系统正在使用的资源,因此关机或重启最 ...
- centos下关闭自动锁屏
自己这段时间在学习Linux,选用的系统的为CentOS,在实际操作过程中遇到问题,在无任何操作情况下,系统过一段时间自动锁屏需要重新输入密码.经过多次尝试以后终于成功!解决方法如下: Setting ...
- C#当中使用async和await
最近在写程序的时候,经常遇到大量需要异步访问的情况,但是对于async和await到底怎么写,还不是非常明确.于是参考<C#图解教程>了异步编程一节. 1.普通的程序怎么写? class ...
- PWA
附一个示例e6书写 todolist的示例,切换list的状态: //todolist示例 const toggleTodo = (id)=>{ setTodos(todos => tod ...
- [ 转载 ] Java基础
1.String a = “123”; String b = “123”; a==b的结果是什么? 这包含了内存,String存储方式等诸多知识点.ans:同样序列的字符串直接量为一个实例,所以其实引 ...
- 《图解HTTP》笔记2
1.SSL(Secure Socket Layer,安全套接层) 1)SSL的作用 通信加密 确定通信方 SSL 提供认证和加密处理及摘要功能 HTTP 协议中没有加密机制,但可以通过和 SSL(Se ...
- vue-cli3 clone项目后如何安装插件及依赖模块启动项目
一. 前提条件1.确保使用的是Node 8.11.0+和NPM 3+:2.确保已全局安装vue-clie3:npm install -g @vue/cli: 二.安装依赖 1.在安装依赖之前,先安装官 ...
- Python+request 分模块存放接口,多接口共用参数URL、headers的抽离,添加日志打印等《三》
主要介绍内容如下: 1.分模块存放接口 2.多接口共用参数URL.headers的抽离为配置文件 3.添加日志打印 4.一个py文件运行所有所测的接口 如上介绍内容的作用: 1.分模块存放接口:方便多 ...
- 性能一 Exploring Mobile vs. Desktop OpenGL Performance
opengl insight Exploring Mobile vs. DesktopOpenGL Performance Jon McCaffrey 前面那些内容以前看过 应该写在谋篇帖子里了 F ...