Bootstrap中img-fluid类在移动端尺寸下图片不显示问题求助

问题根因 #

1. 顶部jumbotron背景图消失的核心原因是你重复定义了background-position属性，最后生效的background-position: 0px -550px将背景图垂直向上偏移了550px，而jumbotron固定高度仅为400px，移动端视口变窄时，背景图缩放后可视区域完全超出了容器范围，视觉上表现为图片消失。
2. 若下方的img标签也存在消失问题，可按后续步骤排查。

解决方案 #

第一步：修复jumbotron背景配置 #

调整.jumbotron-openness的CSS规则，同时增加移动端适配逻辑：

.jumbotron-openness {
  background-repeat: no-repeat;
  background-size: cover;
  /* 保留适配性更好的居中定位，删除固定负偏移规则 */
  background-position: center center;
  justify-content: center;
  display: flex;
  /* 用最小高度代替固定高度，适配内容变化 */
  min-height: 400px;
  align-items: center;
  background-image: url("../../images/openness.jpeg");
}

/* 移动端适配规则 */
@media (max-width: 768px) {
  .jumbotron-openness h1 {
    /* 缩小移动端标题字号，避免溢出 */
    font-size: 36px;
  }
  .personality__body {
    /* 减小移动端左右边距，避免内容挤压 */
    margin: 0 1rem;
  }
  .personality__description {
    font-size: 16px;
    padding: 1rem 0;
  }
}

如果需要保留桌面端的背景偏移效果，可以通过媒体查询单独给桌面端设置偏移规则：

@media (min-width: 992px) {
  .jumbotron-openness {
    background-position: 0px -550px;
  }
}

第二步：排查img标签消失问题 #

你当前使用的img-fluid是Bootstrap 4/5版本的正确响应式图片类，无需替换为旧版img-responsive，如果下方img标签也存在消失问题，按以下顺序排查：

• 确认openness3、openness4、openness5等图片资源的引入路径正确，无加载报错
• 排查全局样式是否存在针对宽度小于576px视口的隐藏规则（如display: none），作用于img的父元素（span、col-sm-6容器等）
• 给img标签补充alt属性，方便确认元素加载状态

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