Featured image of post Hexo (Sakura) 缩略图显示异常

Hexo (Sakura) 缩略图显示异常

修复 Sakura 主题分类页缩略图变形

前言

abnormal-thumbnail

由于文章的头图宽高比例不是 1:1,缩略图强行将它放入圆形容器中,挤压了宽度,导致了变形。

正文

abnormal-thumbnail-location

可以大致定位在分类页的部分:

目录

<article class="post post-list" itemscope="" itemtype="http://schema.org/BlogPosting">
  <div class="post-entry">
    <div class="feature">
      <a href="<%- url_for(post.path) %>">
        <div class="overlay">
          <i class="iconfont icon-text">
          </i>
        </div>
        <img width="150" height="150" src="<%= post.photos[0] %>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" >
      </a>
    </div>

这里要用到 CSS 属性 object-fit,关键字选择 cover ,让图片填满整个内容框,如有超出的部分则裁剪掉。

<img width="150" height="150" style="object-fit: cover;" src="<%= post.photos[0] %>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" >

注意:图片一定要设置宽高,否则 object-fit 将无效。

效果

改之前:

abnormal-thumbnail

改之后:

normal-thumbnail

参考资料

用 CSS 解决前端图片变形问题

Licensed under CC BY-NC-SA 4.0
使用 Hugo 构建 主题 StackJimmy 设计
发表了 32 篇文章・ 总计 66.22 k 字
本站总访问量 · 总访客数
本博客已稳定运行 🧡