1.使用簡書自帶的Markdown編輯器

原始圖像:
![loading.png](http://upload-images.jianshu.io/upload_images/1503319-c696a9cd1495d68f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

loading.png

更改大小:
![loading.png](http://upload-images.jianshu.io/upload_images/1503319-c696a9cd1495d68f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/200)

loading.png

只需要將后面的寬度更改就可以了.這種改鏈接有效果的原因是因為服務(wù)器根據(jù)圖片鏈接對原圖進行了縮放并返回.這種方案需要服務(wù)器支持對圖片鏈接的識別并進行對應(yīng)的縮放.

(這種方法在編輯器上有效果,但發(fā)表出來后在頁面上無效果,不知道為什么)

2.使用HTML <img>標(biāo)簽并設(shè)置width和height

Markdown語法:

<img src="http://p1-ks3.532106.com/33f925f1f92649678221088fdfb531a1.jpg" alt="圖片替換文本" width="500" height="313" align="bottom" />

只需要更改上面的屬性width或height的值就可以了,align="bottom"可以省略或根據(jù)需要設(shè)置其他值如top , bottom , middle , left , right.

原始圖像效果:

mytest.jpg

更改后

<img src="http://p1-ks3.532106.com/33f925f1f92649678221088fdfb531a1.jpg" alt="圖片替換文本" width="100" height="30" align="bottom" />

效果:

<img src="http://p1-ks3.532106.com/33f925f1f92649678221088fdfb531a1.jpg" width="100" height="30" align="middle" />

我自己的博客系統(tǒng)是有效果的,但是不知道為啥這里的卻渲染不出來.....

3.自己處理圖片大小,重新生成圖片鏈接

終極方案,無需考慮各大Markdown編輯器兼容性問題.

原始圖像:

mytest.jpg

自己調(diào)整大小后的圖片:

mytest.jpg

注意

每家的Markdown編輯器語法會有所不同,因此在一個編輯器下寫的Markdown復(fù)制到另一家的編輯器下,顯示可能會有差異.對于新手來說簡書自帶的Markdown編輯差不多已經(jīng)夠用了.