如何运用 CSS 实现图片在达到高度限制时自动裁剪（顶部和底部）

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

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

要实现图片在屏幕变高（如宽屏设备）时自动裁剪顶部与底部、而非拉伸或留白，关键在于将图片作为“填充式背景”来处理，而非依赖传统的宽高自适应缩放。核心思路是：让容器设定高度上限并隐藏溢出，再让图片以覆盖模式（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 的作用：保持图片原始宽高比，缩放至完全覆盖容器，多余部分（通常是顶部和底部）被自动裁剪——这正是你所需的“高度受限时上下裁剪”效果。

? 注意事项与优化建议

• 避免同时设置 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 替代 <img> 并配合 background-size: cover。

✅ 最终 HTML 无需修改（保持语义清晰）

<div class="image-container">  <img src="../../assets/home_image1.jpg" alt="bg image of airplane" class="background-image" />  <div class="text-overlay">    <h1>Universal Tours</h1>  </div></div>

这样，无论屏幕多宽或多高，图片都会始终以最佳比例填满容器，超出 600px 高度的部分自动裁剪，文字层仍精准居中——简洁、高效、专业。