【園子MD】如何調整博客園的makedown圖片的大小和對齊方式

總結：最好用這種方式

博客園用戶推薦使用<div align="center"><img src="圖片路徑" style="zoom:20%" alt="圖片名稱"/></div>✅
其次是二維縮放<img src="圖片路徑" width="20%" height="20%" alt="圖片名稱" align=center />align無效
再次是改變大小<img src="圖片路徑" width="200" height="200" alt="圖片名稱" align=center />
理論很不錯，但有可能會出問題的是全局修改樣式<style>img{max-width:80%;}<style/>

抱歉，本文有一個錯誤，img的align屬性已經失效了，要想居中，只能用div的align屬性
<div align="center"><img src="圖片路徑" style="zoom:20%" alt="圖片名稱"/><div>

若是你對博客園的Makedown語法感興趣
請看👉【園子MD】博客園最全的makedown語法

開始測試：

拿這張少女圖來測試

html的img標籤

1.根據尺寸改變圖片的大小

• 同<img src="圖片路徑" width="200px" height="200px" alt="圖片名稱" align=center />
• 同<img src="圖片路徑" width="200" height="200" alt="圖片名稱" align=center />
• 同<img src="圖片路徑" width=200 height=200 alt="圖片名稱" align=center />
• 同<img src="圖片路徑" width=200px height=200px alt="圖片名稱" align=center />
  若是想將圖片位於右側，只須要將center改成right
  放心，我檢查過，寫不寫px都是同樣的：
  

2.根據比例改變圖片的大小

最好：zoom縮放
同下<img src="圖片路徑" style="zoom:20%" alt="圖片名稱" align=center>
同上<img src="圖片路徑" style="zoom:20%" alt="圖片名稱" align=center />
標籤是否自閉合影響不大。但仍是建議自閉合
二者相同效果，並且第二個zoom縮放比第一個改變尺寸，更方便。在主流markdown編輯環境中可以使用，例如CSDN，博客園，知乎。

次之：二維縮放<img src="圖片路徑" width="20%" height="20%" alt="圖片名稱" align=center />
二個維度都要改，寫起來就比較麻煩

這次，首次發現zoom和width&height縮放相同比例，效果是不一樣的，請注意

❌延續makedown特性

百度經驗：在markdown文件中，通常顯示的的方式，如今只須要給它加上{class}的形式就行。這種markdown在簡書等平臺可使用。
![]（https://img2020.cnblogs.com/blog/1735731/202003/1735731-20200327012434152-1202437574.png）{:width="200px" height="200px"}
![]（https://img2020.cnblogs.com/blog/1735731/202003/1735731-20200327012434152-1202437574.png）{:style="zoom:40%"}

抱歉，這兩種在博客園都不行，意思就是博客園裏，想對圖片進行改動，就只能用html語義化，makedown不行。

⛔居中的惟一選擇:用html的div包住

例如設爲居中,在圖片的外面包圍div標籤便可，div包住太麻煩，但也只能用這種方法讓圖片居中。不如第一種直接加class方便，就捨去不談了
<div align="center"><img src="圖片連接" width="20%" height="20%" /></div>

這次用圖替代，再次發現zoom和width&height縮放相同比例，效果是不一樣的，請注意

💥3.直接修改全局css，限制圖片最大寬度

img {
max-width: 80%;
}
此方法應該是次優解，避免部分圖片默認尺寸過大，同時不影響其餘圖片大小。熟練以後，可以一勞永逸~

• 如何在makedown裏直接使用這個次優解呢？
  加上style標籤，就能夠在makedown裏用了。 和JavaScript代碼加上《script》標籤也能夠在makedown裏用，一個原理
  <style>img{max-width:80%;}<style/>

• W3Cschool摘抄：max-width 定義元素的最大寬度。該屬性值會對元素的寬度設置一個最高限制。所以，元素能夠比指定值窄，但不能比其寬。不容許指定負值。
  %-定義基於包含它的塊級對象的百分比最大寬度。

• ❎說是能夠，可是個人博客園裏，主題都是美化過的，一旦用了這個代碼，max-width:90%，文章都會出bug。

• ✅這個方法估計能用在CSDN等其餘makedown編輯器裏，CSDN博主說的。沒有美化過博客園的同窗也能夠試試「限制圖片最大寬度」這個方法。

❌無效的寫法 ![]（ =400x300）