【园子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文件中，一般显示的的方式，现在只需要给它加上的形式就行。这种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）