如何在CSS中裁剪图片？实现导航栏高度的页面头部效果

直接通过容器隐藏超出内容的方式就能实现你的需求，无需调整图片本身尺寸，只需控制容器和图片的样式：

HTML 结构 #

<div class="header-container">
  <img src="你的图片路径" alt="页面头部图">
</div>

CSS 样式 #

.header-container {
  width: 100%; /* 容器铺满页面宽度 */
  height: 70px; /* 固定为导航栏高度 */
  overflow: hidden; /* 隐藏容器高度外的内容 */
}

.header-container img {
  width: 100%; /* 图片宽度铺满容器 */
  object-position: top; /* 图片顶部对齐容器，确保显示顶部区域 */
}

关键说明 #

• overflow:hidden是核心：容器固定高度后，图片超出容器的部分会被直接裁剪隐藏，完全不会改动图片的原始尺寸。
• object-position:top保证图片从顶部开始展示，避免默认的居中对齐导致顶部内容被裁切，正好满足你裁剪底部约90%的需求。
• 不需要给图片设置高度，让它按原始宽高比自然延展，宽度铺满容器后高度必然超过70px，超出的底部区域就会被容器隐藏。

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