markdown中插入圖片怎麼定義圖片的大小或比例？

&
&


也可以指定縮小比例：

&


詳細可以看官方說明：Resize Images

直接在圖片後面加上對應的CSS樣式即可

![test image size](url)


改寫為

![test image size](url){:class="img-responsive"}
![test image size](url){:h="50%" w="50%"}
![test image size](url){:h="100px" w="400px"}


如果是用Hexo，它有特殊處理，可以直接使用img標籤

&


http://siwangxinyuan.qiniudn.com/jianshu-42-1280x800-%5BDesktopNexus.com%5D.jpg


指定尺寸

http://siwangxinyuan.qiniudn.com/jianshu-42-1280x800-%5BDesktopNexus.com%5D.jpg?imageView/2/w/619/q/90


轉：
![](./pic/pic1_50.png =100x20)
注意 =前有個空格，可以只寫寬度，Mou中支持


我用mweb編輯器這樣實現的

在描述後面跟上 「-w寬度」，具體代碼這樣的：

原代碼：


修改後代碼（加粗部分為新增代碼，數字為縮放大小）：


歡迎交流學習！

&


推薦用Typora寫markdown!

之前一直苦惱於截圖放進Typora裡面之後顯示過大。。。佔好多地方

剛剛研究了一下，發現最簡便的方法是修改你使用的Markdown主題的.css文件，在裡面添加一個代碼，讓以後插入的所有圖片都縮小50%（個人感覺50%剛好），就解決這個問題了

以我使用Github主題為例：

1. 打開設置
2. 點擊「Open Theme Folder」
3. 打開文件夾下的「github.css」文件
4. 在文件最後添加以下代碼後保存就行了

img {
zoom: 50%;
}

大部分回答都沒有看到問題的本質。

正常來說，使用markdown寫作是不太需要調圖片大小的，與正文寬度一致就行了。問題在於很多編輯器的內容顯示過寬，這樣圖片會佔滿屏幕，導致瀏覽不便，所以會覺得圖片太大了，要調圖片大小，而只調小圖片反而會不協調。

大家可以看一下主流資訊網站，電腦端的內容顯示寬度通常為650px左右，比如知乎、豆瓣。這樣圖片高度占屏幕高度二分之一以內，上下內容都能看到，閱讀起來就很好銜接。而且這個寬度很適合閱讀，不會太寬讀以致讀下一行時不好定位，也不會太窄導致頻繁換行。

所以如果你寫作時覺得圖片太大，那麼真正要調的不是圖片的大小，而是內容的寬度；

由於不同編輯器設置不一樣，就拿我用的typora來舉例吧：

默認的主題最窄也有860px，減去留白也有800px，效果是這樣的：

圖片佔了大部分畫面，下面的內空都看不到了。

調成600px後，就好多了：

雖然typora沒有提供設置地方，但可修改主題的css文件中的整體寬度，比如我用的github.css：

我的所在目錄是：/Users/fwk/Library/Application Support/abnerworks.Typora/themes

#write{
max-width: 660px; /* 原為860px; */
}


另外，typora更新後會把主題文件替換掉，舊的會移到到old-themes目錄，所以要記得備份一份。

最後感謝 @LOMO 的回答，讓我知道主題是可以編輯的。

在mou中
[](./pic/img.png =100x) 後邊的參數可以不填,保持原有比例



目前markdown里應該沒有特定的語法支持，我是用""實現的～

不好意思，我插入的語句顯示不出來，用img標籤實現就好了。

&


Mou中編輯

注意到問題有一個 Hexo 標籤。所以其他答案推薦編輯器，應該無法解決問題的核心。

解決方案：

一種，就是其他答案已經提到的。直接使用 img 的 html 代碼。

另一種，如果，你非常想用 markdown 這種語法，不想混入 html，方法當然有。

有一種叫做 kramdown 的存在，是 markdown 的超集，或者說方言也可以。

它支持一種叫做 Inline Attribute 的特性。官方文檔舉的例子：

This *is*{:.underline} some `code`{:#id}{:.class}.
A [link](test.html){:rel="something"} and some **tools**{:.tools}.


針對你的問題，你可能需要這樣寫

![img](url){:h="100" w="100"}


我使用 jekyll 的時候，默認支持 kramdown，

那麼 Hexo 也應該有對應的插件來解析你的 kramdown。

提供一種應該比較通用的思路，可以實現調整比例同時讓圖片保持局中。

在文章頭部添加：

& img{
width: 60%;
padding-left: 20%;
}
&

padding-left = (100% - width) / 2

局限就是這個對文章所有圖片都有效，如果圖片尺寸標準差異過大，建議還是用單獨的&標籤來定義。