Blogger Contempo主题修改缩略图如何稳定保持1:1宽高比

API 探路者

2026-10-6

解决方案

一、调整响应式图片组件参数

替换你原有代码为以下内容：

<b:include data='{
    image: data:post.featuredImage,
    imageSizes: [512, 945],
    imageRatio: "1:1",
    sourceSizes: "(max-width: 800px) 80vw, 945px",
    resizeConfig: {
      upscale: true,
      crop: "1:1"
    }
}' name='responsiveImage'/>

参数调整说明：

移除了32/64/128/256等小于要求最小尺寸的规格，直接从512px起步，避免小尺寸图放大后失真
基准加载尺寸调整为理想值945px，确保大屏设备加载最高清的正方形资源
新增resizeConfig配置项，开启小图放大权限，强制所有图片按照1:1比例裁切，解决原始矩形图/小尺寸图不自动适配的问题

二、补充全局CSS强制规则

部分场景下Blogger自带的图片渲染逻辑会忽略组件参数，添加以下CSS即可兜底：

/* 强制缩略图保持1:1正方形比例 */
.responsive-image-container, .post-featured-image-container {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.responsive-image-container img, .post-featured-image-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

这段CSS会强制缩略图容器保持正方形，图片自动居中裁切填充，不会出现拉伸、留白、比例异常的问题。