通过设置容器宽度为视口百分比并配合 object-fit: cover，可让图片在缩放时优先裁剪右侧，从而固定左侧留白与关键内容区域，实现类似 Nike 首屏的响应式英雄图效果。
通过设置容器宽度为视口百分比并配合 `object-fit: cover`，可让图片在缩放时优先裁剪右侧，从而固定左侧留白与关键内容区域，实现类似 nike 首屏的响应式英雄图效果。
要实现“缩放时仅裁剪图像右侧、保留左侧留白与主体位置”的响应式效果，核心在于控制容器宽度而非图片自身拉伸，并利用 object-fit 与 object-position 精确设定裁剪锚点。
默认情况下，object-fit: cover 会居中裁剪图片（即等比缩放后从中心向四周裁剪）。但我们需要的是“左对齐裁剪”——即保持图像左侧内容始终可见，右侧随容器变窄而被逐步隐藏。这可通过 object-position: left center 实现：
.hero {
position: relative;
width: 70vw; /* 容器宽度设为视口宽度的 70%，留出左右白边 */
margin: 0 auto; /* 水平居中，白边自然分布在两侧 */
overflow: hidden; /* 确保超出部分被裁剪（增强兼容性） */
}
.hero > img {
width: 100%; /* 图片撑满容器宽度 */
height: 690px; /* 固定高度，维持视觉比例 */
object-fit: cover; /* 保持宽高比，覆盖整个区域 */
object-position: left center; /* 关键！强制图像左边缘对齐容器左边缘 */
display: block; /* 消除行内元素默认间距 */
}<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>
✅ 为什么这样有效？
- width: 70vw 让容器随屏幕缩放，左右自动产生 15vw 白边；
- object-position: left center 告诉浏览器：无论图片多宽，始终将图像最左侧像素对齐容器左边界，多余部分从右侧溢出；
- height: 690px 固定高度确保视觉节奏稳定（如需完全流体，可用 aspect-ratio 替代）；
- overflow: hidden 是安全兜底，防止极小屏幕下渲染异常。
⚠️ 注意事项：
- 避免同时设置 max-width 和 width: 70vw 冲突（原代码中的 max-width: 1330px 会破坏 vw 行为）；
- 若需适配移动端更小高度，可结合媒体查询调整 height 或改用 aspect-ratio: 16 / 9 + height: auto；
- object-position 兼容性良好（Chrome 32+、Firefox 36+、Safari 15.4+），旧版 Safari 可加 -webkit-object-position 前缀。
这种方案不依赖 JavaScript，纯 CSS 驱动，性能优异，且精准复刻 Nike 等品牌官网的“焦点锁定式”响应式图像体验。
