记录Markdown的使用小技巧

1、指定图片大小

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

1

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

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

1

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

或者通过 style属性来设置:

1

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

2、指定图片水平位置

位置：靠左、靠右、居中

  • 靠左
1
2
3

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

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

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

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

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  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;
  }
1
2
3

![<](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)