Markdown

1 post with the tag “Markdown”

Markdown小技巧

Jan 1, 2019

xiwang

全栈开发者

记录Markdown的使用小技巧

1、指定图片大小

使用下面的方式显示图片时，会使用图片的本身的尺寸来显示图片:

![](https://github.com/kubernetes/minikube/raw/master/logo/logo.png)

这种方式无法修改图片的显示大小，可以使用在Markdown中HTML，来指定图片大小:

<img src="https://github.com/kubernetes/minikube/raw/master/logo/logo.png" width="200"/>

或者通过 style属性来设置:

<img src="https://github.com/kubernetes/minikube/raw/master/logo/logo.png" style="width:200px;"/>

2、指定图片水平位置

位置：靠左、靠右、居中

• 靠左

<p>
  <img align="left" width="200" height="200" src="https://github.com/kubernetes/minikube/raw/master/logo/logo.png">
</p>

• 靠右

<p>
  <img align="right" width="200" height="200" src="https://github.com/kubernetes/minikube/raw/master/logo/logo.png">
</p>

• 居中

<p align="center">
  <img width="200" height="200" src="https://github.com/kubernetes/minikube/raw/master/logo/logo.png">
</p>

在生成静态博客时，可以通过CSS的方式进行控制

css

  p>img[alt$=">"] {
    float: right;
  }
  p>img[alt$="<"] {
    float: left;
  }
  p>img[alt$="<>"] {
    display: block;
    max-width: 100%;
    height: auto;
    margin: auto;
    float: none !important;
  }

![<](https://github.com/kubernetes/minikube/raw/master/logo/logo.png)
![>](https://github.com/kubernetes/minikube/raw/master/logo/logo.png)
![<>](https://github.com/kubernetes/minikube/raw/master/logo/logo.png)

Tags:

• Markdown