通过设置容器宽度为视口百分比并配合 object-fit: cover，可使图像在缩放时优先裁剪右侧，同时保留左侧空白与视觉主体位置稳定。

通过设置容器宽度为视口百分比并配合 object-fit: cover，可使图像在缩放时优先裁剪右侧，同时保留左侧空白与视觉主体位置稳定。

要实现类似 Nike 官网英雄图的响应式效果——即屏幕变窄时仅右侧被裁剪、左侧白边与图像主体（如鞋款）位置保持不变，关键在于放弃固定像素宽度控制，转而使用基于视口的相对单位（如 vw）约束容器，并确保图像始终居中覆盖。

核心原理是：当容器宽度随视口缩小（例如设为 70vw），且图像宽度与容器一致（width: 100%），再配合 object-fit: cover 和默认的 object-position: 50% 50%（居中对齐），图像会等比缩放并从两侧均匀裁剪。但若希望仅右侧裁剪，需将图像的锚点向左偏移，即显式设置 object-position: left center：

.hero {
  position: relative;
  text-align: center;
  width: 70vw;           /* 响应式容器宽度，预留左右白边 */
  max-width: 1330px;     /* 防止超大屏下过度拉伸 */
  margin: 0 auto;        /* 水平居中，确保白边左右对称 */
}

.hero > img {
  display: block;        /* 消除行内元素默认间距 */
  width: 100%;
  height: 690px;         /* 固定高度，维持视觉比例 */
  object-fit: cover;     /* 保持宽高比，填充容器 */
  object-position: left center; /* 关键！让图像左边缘对齐容器左边缘，右侧自然溢出 */
  margin: 0 auto;
}

HTML 结构保持简洁：

<div class="hero">
  <img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="Nike Tanjun Shoes">
</div>

⚠️ 注意事项：

• 避免给 .hero 设置 top: 6.7rem 等绝对定位偏移，易破坏流式布局；推荐用 margin-top 或 Flex/Grid 容器统一控制垂直间距；
• 若需更精细控制（如不同断点下调整裁剪比例），可结合媒体查询动态修改 object-position，例如在小屏下设为 0 center 强制左对齐；
• height: 690px 在移动端可能过高，建议搭配 aspect-ratio（现代浏览器）或 padding-top 技巧实现响应式宽高比，兼顾可访问性与性能。

最终效果：图像高度恒定，左侧内容（如产品主体）始终可见，右侧随视口收缩被优雅裁切，左右白边比例协调，完美复现高端品牌级响应式视觉体验。