如何让图片适配容器高度？CSS实现问题求助

嘿，我完全懂这种看似简单但就是不生效的挫败感——我之前也踩过这个百分比高度的坑！

你的代码逻辑本身是对的，但问题出在容器的父元素没有设置明确的高度，导致#project-header的height:50%根本无法被浏览器计算。

为什么会失效？ #

CSS里的百分比高度是相对于父元素的高度来计算的。如果#project-header的父元素（比如body和html）没有设置高度，浏览器就不知道这个50%是相对于什么的，自然不会给容器分配实际高度，图片的height:100%也就失去了参照。

修复方案 #

只需要给最顶层的html和body设置100%的高度，让#project-header的50%有明确的参照对象：

/* 先给根元素设置全高 */
html, body {
  height: 100%;
  margin: 0; /* 移除默认边距，避免出现不必要的滚动条 */
}

#project-header {
  height: 50%;
  /* 可选：加个边框方便你确认容器是否正确占满视口一半高度 */
  border: 1px solid #ddd;
}

#project-header img {
  display: block;
  height: 100%;
  width: auto;
  margin: auto;
}

额外注意点 #

如果#project-header还有其他嵌套的父元素（比如一个包裹它的<div>），那这个父元素也需要设置height:100%，一直传递到html/body层级，这样百分比高度才能正确生效。

试一下这个修改，你的图片应该就能根据容器的高度自适应，同时保持正确的宽高比啦！

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