如何解决Contentful嵌入BigCommerce/Shogun的图片横幅被截断问题

问题根因 #

• 承载背景图的div仅靠15px上下padding撑高，容器高度远小于背景图原始高度，background-size: cover属性会自动裁剪超出容器的图片部分
• 外层<span>为行内元素，默认宽度受BigCommerce/Shogun站点主题的内容区固定最大宽度限制，部分主题默认给内容区加了overflow: hidden属性，会导致横向截断
• 背景图默认定位为左上角，若核心视觉内容不在左上角也会出现可见区域的截断问题

修复方案 #

你可以直接替换原有代码，或者按修改点调整：

核心修改点

1. 给背景容器添加aspect-ratio属性，按你背景图的原始宽高比设置，可自适应宽度保持原图比例，不会强制裁剪
2. 外层span设置为块级元素，配置通栏宽度，突破站点内容区的固定宽度限制
3. 新增background-position: center center保证图片核心内容居中显示

修复后CSS代码

padding: 15px 5px;
margin-bottom: 15px;
overflow: visible !important;
background-image: url("你的背景图地址");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
/* 新增部分，按你实际图片宽高比调整 */
aspect-ratio: 1920 / 500;
width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);

修复后HTML代码

<span id="clp-furniture-multiLinkBanner" style="display:block;width:100%;overflow:visible;">
<div style="padding: 15px 5px;margin-bottom: 15px;overflow: visible !important;background-image: url('你的背景图地址');background-repeat: no-repeat;background-size: cover;background-position: center center;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: center;aspect-ratio: 1920/500;width: 100vw;position: relative;left: 50%;transform: translateX(-50%);">
<div style="color: white; display: flex; flex-direction: column; text-align: center;">
<a href="#" style="text-decoration: none;">
<h4 style="color: black; font-size: 22px; line-height: 32px; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; font-family: NeutrafaceText-Demi;"></h4>
<h1 style="color: black; font-size: 68px; line-height: 68px; font-weight: normal; margin-top: 0px; margin-bottom: 5px; font-family: 'Para Supreme Normal';"></h1>
<h4 style="color: black; font-size: 24px; line-height: 32px; margin-top: 8px; font-family: NeutrafaceText-Book; margin-bottom: 0px; white-space: pre-wrap;"></h4>
</a>
</div>
</div>
</span>

如果站点内容区本身就是通栏宽度，不需要突破限制，可以删掉width: 100vw;position: relative;left: 50%;transform: translateX(-50%);这段代码。

如果需要兼容不支持aspect-ratio属性的低版本浏览器，可以替换成padding-top百分比法实现固定比例：比如1920*500的图，添加padding-top: calc(500 / 1920 * 100%)，去掉原有上下padding即可。

内容的提问来源于stack exchange，提问作者ninatwocats