前言

异常缩略图

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

正文

F12定位

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

目录

<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将无效。

效果

改之前:

改之后:

参考资料

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

Q.E.D.


The best thing you can do at work hard.