头部图片设置overflow:hidden不生效，寻求技术解决方案

核心问题 #

1. overflow: hidden 仅对块级容器元素生效，直接作用在 <img> 标签上无效果——img属于替换元素，自身无法实现内容裁剪。
2. 给img设置固定的 height="700px" 会破坏响应式逻辑，导致图片在不同屏幕尺寸下拉伸变形，同时让裁剪规则无法正常触发。
3. justify-content 是Flex容器专属属性，单独给img添加该属性完全无效。
4. CSS选择器优先级冲突：header img 的优先级高于 .dingdong，会覆盖自定义类的样式设置。

修复后的代码 #

HTML 部分

移除img上的固定height属性，让容器控制尺寸范围：

<header class="img-container">
  <img class="dingdong" src="images/header.jpg" alt="头部图片">
</header>

CSS 部分

将overflow:hidden转移到容器上，用object-fit控制图片的响应式显示逻辑：

/* 容器负责裁剪和尺寸约束 */
.img-container {
  overflow: hidden;
  width: 100%;
  /* 可根据需求设置最大高度，限制容器显示范围 */
  max-height: 700px;
}

/* 图片自适应容器，保持比例 */
.dingdong {
  width: 100%;
  height: 100%;
  /* cover：按比例缩放填满容器，超出部分被裁剪；contain：完整显示图片，容器留空 */
  object-fit: cover;
}

关键说明 #

• 使用object-fit: cover时，图片会按比例缩放以填满容器，超出容器的部分会被overflow:hidden裁剪，适合需要铺满容器且保留图片比例的场景。
• 若要完整显示图片，可将object-fit改为contain，此时图片会完整呈现，容器空白区域将留空。
• 容器的max-height可根据需求调整或移除，让图片高度自适应内容。

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