Hong Cheung 
請注意
這個方法需要使用 .mdx
我很喜歡用 Markdown 寫部落格文章。
不過，修改圖片一直是令人頭痛的問題之一。
在這篇文章中，我會教你如何用一點 HTML，隨心所欲地調整圖片大小與位置。
別擔心，我會一步步帶你操作。
問題所在
在 Markdown 部落格文章中插入圖片，唯一的方法就只有這樣：
結果：
我知道她看起來很可愛，但她佔滿了整個畫面！如果你希望她小一點呢？
調整大小
只要用一點 HTML，就能幫你解決這個問題。
Instead of using , we use the following:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />程式碼說明：
src 是那張貓咪圖片來源的縮寫。
alt 則是你填入這段內容的地方 - ! [圖片描述] ( 連結 )
style 則是你改變圖片呈現方式的地方。這裡我把它設為最大寬度 400 像素——無論如何都不會超過。
結果：
你可以把 max-width 改成任何你想要的數值。
不過，請注意我這裡並沒有改 max-height。這是因為如果你同時為圖片設定固定的寬度與高度，圖片可能會被擠壓變形，而你應該不會想要那樣。
所以，最好只設定 max-width 或 max-height 其中一個，讓圖片維持正確的比例。
位置
你可能也想把圖片置中，而不是預設的靠左對齊。
只要在 ‘max-with: 400px;’ 後面加上 ‘margin: auto;’ 就可以了。
程式碼：
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />結果：
太好了！現在你已經知道在部落格文章中調整圖片大小的基本方法了。
接下來，我想再示範另一種能達到相同效果、甚至可以說更好的方法。
讓我們來看看我在 Markdown 中修改圖片的偏好做法。
我的偏好做法
程式碼：
<div style="max-width: 400px; margin: auto"> </div>結果：
如你所見，結果和上面一樣！但程式碼看起來更簡潔。 更重要的是，你仍然可以使用預設的方式插入圖片：
然後，用一個 div（在這裡就是圖片的容器）把它包起來
<div style="max-width: 400px; margin: auto"></div>還記得我們在 img 中用過的 style=“max-width: 400px; margin: auto” 嗎？
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />我們只是把樣式修改套用到包住圖片的容器上。
<div style="max-width: 400px; margin: auto"> </div>這樣一來，兩種方法的好處你都得到了！看起來也很整齊！
感謝閱讀，希望對你有幫助！
如果有任何問題，歡迎在下方留言告訴我。
祝你寫作愉快！
