如何创建不同尺寸的图片列表并解决图片排版错位问题

你遇到的图片错位问题核心是图片代码和普通文本放在了同一个段落块内，按以下规则调整即可实现预期效果：

• 基础无错排版（纯Markdown写法）
  不要将图片代码和普通段落文字写在同一行，每一张可点击图片单独占一行，固定写法为：
  [![图片替代文本](图片资源地址)](点击跳转的原图地址)
  按该规则单独书写的图片会自动独占显示块，不会和文字挤在一起出现错位。
• 统一不同尺寸图片的显示大小
  原生Markdown不支持指定图片尺寸，你可以直接在Markdown内嵌入HTML代码实现尺寸控制，保证所有图片显示规格一致，避免排版错乱：

  <a href="原图访问地址">
    <img src="图片资源地址" alt="图片替代文本" width="300">
  </a>
  

  上面的width属性可以统一设置所有图片的显示宽度，高度会自动等比例缩放，你也可以替换为height属性统一设置显示高度。
• 多图网格排版
  如果需要实现多图并排的效果，可以用Markdown表格承载图片，每个单元格放置一张图片，即可自动生成整齐的网格排列：

  | [![图1](图1资源地址)](原图1地址) | [![图2](图2资源地址)](原图2地址) | [![图3](图3资源地址)](原图3地址) |
  | -------------------------------- | -------------------------------- | -------------------------------- |
  

内容的提问来源于stack exchange，提问作者Iman