如何防止浏览器窗口缩放时图片比例变形且遮挡h3元素？

嘿，我来帮你搞定这个困扰～你现在遇到的两个问题：缩放窗口时图片拉伸变形，设固定高度又挡住h3，其实都是布局高度设置和图片适配方式的问题，咱们一步步来解决：

核心问题分析 #

1. 图片宽高比变形：你给#image和它的所有父容器（header、.container-fluid、.row）都设了height: 100%，这会让图片容器强制占满整个视口高度，窗口缩放时容器的宽高比例变化，图片就会跟着拉伸变形。
2. 遮挡h3：同样是因为父容器全设了height:100%，整个header占满了屏幕高度，h3被挤到了视口外面，看起来像是被图片挡住了。

具体解决方案 #

方案1：用object-fit保持图片比例+调整容器高度 #

这是最推荐的现代解决方案，语义化好且代码简单：

修改你的CSS代码如下：

header {
  width: 100%;
  /* 去掉height:100%，改用max-height限制最大高度，给h3留空间 */
  max-height: 80vh; 
  overflow: hidden; /* 防止图片超出容器范围 */
}

.container-fluid {
  padding: 0;
  /* 移除height:100%，让容器自适应内容高度 */
}

.row {
  /* 移除height:100% */
}

#image {
  width: 100%;
  height: 100%;
  /* 关键：保持图片宽高比，填满容器（超出部分会被裁剪） */
  object-fit: cover; 
  border-bottom: 1px solid #ed1c24;
  /* 移除flex-flow，这个属性是给flex容器用的，图片不需要 */
}

细节说明：

• object-fit: cover：让图片保持原始宽高比，同时填满整个容器，超出容器的部分会被裁剪掉，保证容器始终被图片铺满，不会变形。如果想完整显示图片不裁剪，可以换成object-fit: contain，但容器可能会出现留白。
• max-height: 80vh：让header最多占视口高度的80%，剩下的空间留给h3，避免h3被挤出视口。你可以根据需求调整这个数值，比如70vh、90vh都可以。

方案2：背景图兼容方案（适合旧浏览器） #

如果需要兼容不支持object-fit的旧浏览器（比如IE），可以把图片换成背景图的方式：

修改HTML：

把原来的<img id="image" src="你的图片地址">换成一个容器div：

<div id="image-container"></div>

修改CSS：

header {
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
}

#image-container {
  width: 100%;
  height: 100%;
  background-image: url('你的图片地址');
  background-size: cover; /* 保持背景图比例，填满容器 */
  background-position: center; /* 让图片居中显示 */
  border-bottom: 1px solid #ed1c24;
}

这个方法兼容性更好，但不如img标签语义化，适合有旧浏览器兼容需求的场景。

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