如何调整博客内图片大小

演示环境

  • 博客环境：hexo
  • 主题：anzhiyu

问题演示

手机拍的照片是竖图（比例很高），主题默认让图片 width: 100%，高度按原图比例撑开，于是看起来“特别长”。（如图）

解决方案

方案1 用 HTML 控制图片高度 / 比例

Markdown格式图片为

改成 HTML 写法，限制高度或最大高度：

1
2
<img src="图片链接"
     style="max-height:600px; width:auto; display:block; margin:0 auto;" />

效果：

  • 竖图不会无限拉长
  • 横图正常显示
  • 居中、美观

方案2 统一限制所有文章图片（推荐）

方案一每次放图片都要单独设置，太麻烦了，所以推荐直接使用方案二，一次修改，永久便利。

修改主题custom.css配置文件（anzhiyu不在这）

1
themes/anzhiyu/source/css/_custom/custom.css

添加

1
2
3
4
5
6
7
8
/* 限制文章图片最大高度，防止竖图过长 */
.post-content img {
  max-height: 600px;
  width: auto;
  display: block;
  margin: 1rem auto;
  object-fit: contain;
}

之后执行hexo三联

1
2
3
hexo cl
hexo generate
hexo s

anzhiyu没有单独的custom.css，需要在如下路径修改

1
hexo根目录\themes\主题\source\css\_layout\post.styl

找到下面img这一段

1
2
3
4
5
6
img
  display: block
  margin: 0 auto 20px
  max-width: 100%
  transition: .3s
  border-radius: 8px

添加宽度限制（如下三行）

1
2
3
4
5
6
7
8
9
img
  display: block
  margin: 0 auto 20px
  max-width: 100%
  max-height: 500px        // 核心：限制竖图高度
  width: auto              // 防止被强行拉伸
  object-fit: contain      // 保证不裁切
  transition: .3s
  border-radius: 8px

之后执行hexo三联。