求助：调整Header图片height无效，如何缩短图片并保持文本居中

尝试调整.header_image的height百分比来缩短头部图片，但图片高度没有变化，同时需要保持标题文本居中。

现有代码 #

HTML代码 #

<div class="header">
  <img src="images/header_sea(3).jpg" width="99%" class="header_image" alt="sea_sky">
<div class="header_title title"> *.• ʚ welcome to my ocean! ɞ •.* </div>
</div>

CSS代码 #

html, body {
  height: 100%;
  width: 99%;
  text-align: center;
}

.title{
  font-family: 'Poppins', sans-serif;
  font-size: 45px;
  font-weight: bold;
  color: #FB79E1;
  text-align: center;
  text-shadow: 3px 3px white;
}

.header{
  position: relative;
}

.header_image{
  opacity: 0.55;
  height: 40%;
  width: 99%;
}

.header_title{
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 99%;
  display: flex;
  justify-content: center;
  align-items: center;
}

问题原因 #

.header_image的height:40%无效，是因为百分比高度依赖于父元素的高度，而.header没有设置明确高度，默认由图片原始尺寸撑开，所以百分比高度不生效。

解决方法 #

1. 给.header设置明确高度（比如使用视口单位vh或固定像素值），让图片的百分比高度有参考基准；
2. 给图片添加object-fit属性，避免图片拉伸变形，保持比例；
3. 确保标题的居中布局不受影响。

修改后的CSS代码：

html, body {
  height: 100%;
  width: 99%;
  text-align: center;
  margin: 0; /* 去掉默认边距，避免布局偏移 */
}

.title{
  font-family: 'Poppins', sans-serif;
  font-size: 45px;
  font-weight: bold;
  color: #FB79E1;
  text-align: center;
  text-shadow: 3px 3px white;
}

.header{
  position: relative;
  height: 30vh; /* 设置头部容器高度，可按需调整数值 */
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.header_image{
  opacity: 0.55;
  width: 100%; /* 铺满容器宽度 */
  height: 100%; /* 铺满容器高度 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

.header_title{
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

说明 #

• height:30vh：让头部容器高度为视口高度的30%，可根据需求调整为25vh、40vh等数值；
• object-fit:cover：保证图片按比例填充容器，超出部分会被裁剪，不会出现拉伸变形；
• 移除HTML中img标签的width="99%"，改用CSS统一控制样式，避免冲突。

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