网页Banner开发问题：图片未按容器20%页面高度设置显示

嘿，这个问题我碰到过好多次啦！你遇到的核心问题是百分比高度的生效逻辑——CSS里的百分比高度必须依赖父元素的明确高度值，不然浏览器根本不知道这个20%是相对于什么来计算的。

问题根源 #

你的.banner设置了height: 20%，但它的父元素（body和html）默认是没有明确高度的，它们的高度是由内部内容撑开的。所以浏览器会直接忽略.banner的百分比高度，导致图片直接撑满了整个页面。

解决方案 #

只需要两步就能搞定：

1. 先给html和body设置100%高度，让它们占满整个浏览器视口：

html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免出现不必要的滚动条 */
}

2. 优化你的Banner样式，还可以给图片加个object-fit防止拉伸变形：

.banner {
  width: 100%;
  height: 20%;
  overflow: hidden; /* 防止图片超出容器边界 */
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器并裁剪超出部分 */
}

这样设置后，html和body作为.banner的父元素，高度是视口的100%，.banner的20%就会基于这个高度计算，图片也会完美填充在20%高度的容器里啦。

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