Shopify自定义HTML实现左1右2堆叠三图布局求助

以下代码完全适配你的需求：支持为每张图片添加超链接和ALT文本，自带内边距适配显示，匹配你指定的图片尺寸（左图3200x3200、右侧两图3200x1200），可直接用于首页Hero或Promotional Grid板块的自定义HTML区域。

<style>
  .three-image-grid {
    display: flex;
    gap: 20px; /* 左右栏间距 */
    padding: 25px; /* 整体内边距 */
    max-width: 1400px; /* 限制最大宽度，避免过宽 */
    margin: 0 auto; /* 居中显示 */
    flex-wrap: wrap; /* 小屏幕自动换行 */
  }

  .left-image-column {
    flex: 1;
    min-width: 300px; /* 最小宽度，保证小屏幕显示 */
  }

  .right-image-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 右侧两张图的间距 */
    min-width: 300px;
  }

  .grid-image-link {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 4px; /* 可选：添加圆角 */
  }

  .grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
    display: block;
    transition: transform 0.3s ease; /* 可选：hover缩放效果 */
  }

  .grid-image:hover {
    transform: scale(1.02); /* 可选：hover轻微放大 */
  }

  /* 适配小屏幕 */
  @media (max-width: 768px) {
    .three-image-grid {
      flex-direction: column;
    }
  }
</style>

<div class="three-image-grid">
  <!-- 左侧单图 -->
  <div class="left-image-column">
    <a href="https://your-left-image-link.com" class="grid-image-link">
      <img 
        src="https://cdn.shopify.com/s/files/.../left-image.jpg" 
        alt="左侧图片描述文本" 
        class="grid-image"
      >
    </a>
  </div>

  <!-- 右侧堆叠两图 -->
  <div class="right-image-stack">
    <a href="https://your-top-right-link.com" class="grid-image-link">
      <img 
        src="https://cdn.shopify.com/s/files/.../top-right-image.jpg" 
        alt="右侧上方图片描述文本" 
        class="grid-image"
      >
    </a>
    <a href="https://your-bottom-right-link.com" class="grid-image-link">
      <img 
        src="https://cdn.shopify.com/s/files/.../bottom-right-image.jpg" 
        alt="右侧下方图片描述文本" 
        class="grid-image"
      >
    </a>
  </div>
</div>

关键说明 #

• 超链接与ALT文本：直接修改<a>标签的href属性添加跳转链接，<img>标签的alt属性添加图片描述文本，符合SEO要求
• 图片适配：通过object-fit: cover确保图片按比例填充容器，不会拉伸变形；width:100%自动适配父容器宽度
• 内边距与间距：通过.three-image-grid的padding设置整体内边距，gap属性控制栏与栏、图与图之间的间距
• 响应式设计：屏幕宽度小于768px时，自动转为垂直布局，适配移动端显示
• 可选效果：代码中包含hover缩放和圆角效果，不需要可直接删除对应CSS代码

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