如何实现两列高度不同时的延迟滚动效果？

下面是几种实用的纯CSS实现方案，适配不同的展示场景：

方案1：固定单侧留白的单图容器 #

适合单张产品图需要固定侧边留白的场景，通过容器内边距配合图片定位实现：

<div class="product-image-box">
  <img src="product-img.jpg" alt="产品展示图">
</div>

.product-image-box {
  width: 85%;
  margin: 0 auto;
  padding-left: 15%; /* 左侧留白15% */
  box-sizing: border-box;
  overflow: hidden;
}

.product-image-box img {
  width: 100%;
  height: auto;
  object-position: right center; /* 图片靠右对齐，填充容器右侧 */
  object-fit: cover; /* 保证图片比例，裁剪多余部分 */
}

调整padding的方向和数值，就能实现左、右、上、下任意一侧的留白效果，容器宽度可根据页面布局灵活设置。

方案2：响应式图文留白布局 #

如果需要图片旁留白区域同时展示产品信息，用Grid布局实现图文联动的留白效果：

<div class="product-showcase">
  <div class="img-wrapper">
    <img src="product-img.jpg" alt="产品展示图">
  </div>
  <div class="product-desc">
    <h2>MK 4 电容麦克风</h2>
    <p>专业录音级电容麦，适配工作室、直播等多种场景，高灵敏度拾音还原真实音质。</p>
  </div>
</div>

.product-showcase {
  display: grid;
  grid-template-columns: 1fr 28%;
  align-items: center;
  max-width: 1200px;
  margin: 2rem auto;
}

.img-wrapper {
  padding-right: 12%; /* 图片右侧留白，衔接文本区域 */
}

.img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-desc {
  padding-left: 1.5rem;
}

/* 移动端适配，自动堆叠布局 */
@media (max-width: 768px) {
  .product-showcase {
    grid-template-columns: 1fr;
  }
  .img-wrapper {
    padding-right: 0;
  }
  .product-desc {
    padding-left: 0;
    margin-top: 1rem;
  }
}

这种方案能让留白区域自然承载文本内容，同时在小屏幕自动切换为堆叠布局，保证移动端体验。

方案3：不规则局部留白 #

如果需要图片在容器内呈现不规则的留白效果（比如产品图偏向角落），直接用背景图属性实现更高效：

.product-hero {
  width: 100%;
  height: 500px;
  background: url('product-img.jpg') no-repeat bottom 20% right 10%;
  background-size: 65%;
}

通过background-position精准控制图片在容器内的位置，background-size设置图片占比，剩余区域自动形成留白，适合首页Hero区的产品展示。

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