图片下方出现异常空白的技术求助及代码排查

你的问题根源有两个，直接按下面的步骤改就能解决：

修复步骤 #

1. 移除容器的固定高度：删掉.image-container里的height: 100vh——这个属性强制容器占满整个视口高度，哪怕图片本身高度不够，容器下方必然会出现大片空白。
2. 让容器正确居中图片：把.image-container的display: block改成display: flex，你之前写的justify-content: center和align-items: center是flex布局的属性，用display:block根本不起作用，改成flex后既能让图片居中，又能让容器自适应图片的高度。
3. 消除图片的基线空白：给img设置display: block，或者加vertical-align: bottom——inline/inline-block元素会因为文字基线对齐的规则，在底部产生几像素的空白，这也是你之前看到小空白的原因。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Main Page of Canada</title>
  <style>
    /* CSS code for fading image */
    .image-container {
      display: flex; /* 改成flex */
      justify-content: center;
      align-items: center;
      /* 移除height: 100vh */
      overflow: hidden;
      position: relative;
    }
    
    img {
      display: block; /* 改成block消除基线空白 */
      max-width: 100%;
      max-height: 100%;
      opacity: 1;
      transition: opacity 0.5s;
    }
    
    img.fade-out {
      opacity: 0;
    }
    
    /* CSS code for navigation bar */
    nav {
      background: #333;
      height: 50px;
      text-align: center;
    }
    
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    nav ul li {
      display: inline-block;
    }
    
    nav ul li a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 15px 20px;
    }
    
    /* CSS code for sections */
    section {
      padding: 50px;
      margin: 0;
    }
    
    /* CSS code for main page section */
    #main-page {
      margin-top: 0;
    }

    /* Responsive Styles */
    @media screen and (max-width: 768px) {
      section {
        padding: 30px;
      }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // JavaScript code for fading image on scroll
    $(document).ready(function() {
      var scrollTimeout;
      $(window).scroll(function() {
        clearTimeout(scrollTimeout);
        if ($(window).scrollTop() < $(window).height() - 50) {
          $('img').addClass('fade-in').removeClass('fade-out');
        } else {
          scrollTimeout = setTimeout(function() {
            $('img').addClass('fade-out').removeClass('fade-in');
          }, 250);
        }
      });
    });
  </script>
</head>
<body>
  <div class="image-container">
    <img src="(image)" alt="Canada Header Image">
  </div>
</body>
</html>

额外说明 #

如果你想要图片铺满整个视口（没有空白且居中显示），可以保留.image-container的height: 100vh，然后给img加object-fit: cover，这样图片会按比例填充容器，不会变形，也不会留空白：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 保留这个 */
  overflow: hidden;
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 添加这个 */
  opacity: 1;
  transition: opacity 0.5s;
}

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