统一Betheme主题相关推荐模块的图片比例

今天在给一个客户的网站做微调，需要添加案例和文章模块。但是他们的网站比较老，主题也比较旧，使用的是一个老版本的Betheme主题。为了安全，我就只使用了主题自带的BLOG模板布局，没有改代码或安装页面编辑器。添加并设置好后，我发现这个主题默认情况下相关推荐模板的卡片显示不太美观，如上图所示，如果图片大小不一，它就会显示高低不齐，有点难看。

这里给大家分享两段CSS代码：

代码1：

/* 针对相关推荐模块的特殊处理 */
.image_frame.scale-with-grid .image_wrapper {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 3:2比例 */
    overflow: hidden;
    background-color: #f8f8f8; 
}

/* 确保图片完全覆盖容器 */
.image_frame.scale-with-grid .image_wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important; 
    min-width: 100%;
    min-height: 100%;
    transform: scale(1.02);
}

代码2：

/* 针对文章详情页相关推荐模块的图片容器 */
body.single .image_frame.scale-with-grid .image_wrapper {
    position: relative;
    width: 100%;
    padding-top: 66.67%;
    overflow: hidden;
    background-color: #f8f8f8; 
    transition: transform 0.3s ease;
}

/* 悬停效果 - 放大容器 */
body.single .image_frame.scale-with-grid .image_wrapper:hover {
    transform: scale(1.02);
}

/* 确保图片完全覆盖容器 */
body.single .image_frame.scale-with-grid .image_wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center center !important; 
    min-width: 100%;
    min-height: 100%;
    transition: transform 0.3s ease;
}

可以先试代码1，效果更好，但它可能会影响部分其它页面的元素。如果有问题，那就换成代码2，让它只在文章起作用。把上面的代码复制粘贴到【外观-自定义-自定义CSS】中，里面有一些参数可以按需微调，然后应用即可。

接下了刷新网站，打开一篇文章查看，底部的相关推荐模块图片就会统一对齐，自动缩放为代码设置的比例，这样就美观一些了。

---

注意：要注意的是，上面的代码仅仅是针对Betheme主题的，其它主题没用，但你可以参考实现的思路。