求助：Shopify自定义Liquid实现图片移动端自适应缩放（仿视频效果）

你的图片代码存在两个核心问题：缺少响应式CSS规则，以及HTML语法错误（src属性缺失引号、<center>标签未闭合）。参考你视频的实现思路，以下是修正后的代码，可实现和视频一致的自适应缩放效果：

<style>
  /* 容器样式，确保图片居中且不超出容器宽度 */
  .responsive-image-wrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  /* 图片响应式规则 */
  .responsive-image-wrapper img {
    width: 100%;
    height: auto; /* 保持图片原始宽高比，避免拉伸变形 */
    display: block;
  }
</style>

<div class="responsive-image-wrapper">
  <a href="PAGE LINK HERE">
    <img src="IMAGE LINK HERE" alt="图片描述（建议添加，利于SEO）">
  </a>
</div>

关键说明： #

• width: 100%：让图片占满容器宽度，在移动端自动适配屏幕宽度
• height: auto：自动计算高度，保持图片原始宽高比，避免拉伸或压缩变形
• 使用div容器替代<center>标签（<center>已被HTML5废弃，CSS控制布局更规范）
• 修正了src属性的引号缺失问题，确保HTML语法合法

这样修改后，图片会像你的视频一样，在移动端自动缩放适配屏幕，不会溢出。

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