通过设置容器最大高度、隐藏溢出内容，并配合 object-fit: cover，可让图片在高度超限时自动等比缩放并裁剪上下边缘，保持视觉饱满且无留白。

CSS 图片裁剪的核心问题在于：当图片高度超出容器限制时，传统的宽高自适应方式要么导致图片拉伸变形，要么在容器内留下大段空白。理想的效果类似于杂志封面——图片等比缩放、自动裁剪上下边缘、始终填满容器。实现这一效果的关键在于将图片当作“填充式背景”来处理，而非依赖传统的宽高自适应缩放。核心思路是：给容器设定高度上限并隐藏溢出，再让图片以覆盖模式（cover）填满容器。

正确的 CSS 图片裁剪解决方案

.image-container {
  position: relative;
  text-align: center;
  overflow: hidden;          /* 关键：隐藏超出容器的部分 */
  max-height: 600px;         /* 设定高度上限，响应式友好 */
  height: 100vh;             /* 可选：使容器占满视口高度（按需调整） */
}

.background-image {
  width: 100%;
  height: 100%;              /* 图片高度严格匹配容器高度 */
  object-fit: cover;         /* 等比缩放并裁剪，确保完全覆盖 */
  display: block;            /* 避免底部默认间隙 */
}

object-fit: cover 的作用：保持图片原始宽高比，缩放至完全覆盖容器，多余部分（通常是顶部和底部）被自动裁剪——这正是实现“高度受限时上下裁剪”效果的关键属性。

CSS 图片裁剪踩坑提示与优化建议

• 避免同时设置 max-height 和 height: auto：原代码中 .background-image { height: auto } 会与 height: 100% 冲突，必须改为固定高度（即 100%），才能配合 object-fit 生效。
• 容器需有明确高度上下文：.image-container 必须有可计算的高度（如 max-height + height: 100% 或 height: 600px），否则 height: 100% 在图片上无效。
• 响应式增强（可选）：可在媒体查询中动态调整 max-height，例如：

  @media (min-height: 768px) {
    .image-container { max-height: 70vh; }
  }

• 兼容性提醒：object-fit 支持所有现代浏览器（Chrome 32+、Firefox 36+、Safari 10+、Edge 16+）；如需支持 IE，需用 background-image 替代 并配合 background-size: cover。

CSS 图片裁剪最终 HTML 结构

  
  

    
Universal Tours
  

采用上述 CSS 图片裁剪方案后，无论屏幕多宽或多高，图片始终以最佳比例填满容器，超出 600px 高度的部分自动裁剪，文字层仍然精准居中——简洁、高效、专业。