如何消除因缩小图片宽度导致的HTML页面底部空白

当缩小屏幕尺寸时，页面底部会出现如图所示的空白：

我推测这是媒体查询导致的——因为我在媒体查询里缩小了图片宽度，但不明白为什么会在页面下方产生空白。图片放在弹性容器（flex container）里，移除弹性容器后空白就消失了。

请问如何在不产生页面底部空白的前提下缩小图片宽度？

我的代码 #

CSS #

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.about_container {
  display: flex;
  flex-direction: row;
}

.about_container img {
  width: 600px;
  margin-left: 20px;
  margin-top: 20px;
}

.about_container p {
  margin-left: 20px;
}

p {
  font-size: 30px;
  font-weight: 350;
  font-family: "LiberationSansRegular";
  font-style: normal;
  text-align: right;
  margin-top: 50px;
  margin-right: 50px;
}

p span {
  font-weight: bolder;
}

.second_p {
  text-align: left;
}

.about_one {
  background-color: #ebe5dd;
  border: 1px solid rgb(102, 94, 94);
}

.about_one h1 {
  font-size: 28px;
  padding-left: 20px;
  line-height: calc(15vw / 3);
}

/*___________MEDIA QUERIES___________  */
@media screen and (max-width: 1550px) {
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1460px) {
  .about_container img {
    width: 450px;
  }
  p {
    font-size: 24px;
  }
  .about_one h1 {
    font-size: 24px;
    line-height: 15vw/3;
    margin-bottom: 40px;
  }
}

HTML #

<body>
</header>
<main>
    <div class="about_container">
        <img src="pictures/hungarian flag.jpg" alt="" />
        <div class="column_container">
            <p>
                The Hungarian language, or the <em><span>magyar nyelv</span></em
            >, isn't Slavic like its neighbouring countries. Standing isolated
                in Central Europe, Hungarian originates from the Uralic mountains of
                Asia, where our ancestors led a nomadic lifestyle. Thousands of
                years ago they had their own Runic alphabet, unique mythologies and
                belief systems.
            </p>
            <p class="second_p">
                Today Hungarian is spoken by approximately 13 million people
                worldwide, and is famously liked by international film directors for
                our beautiful voiceovers and our film studios. Linguists also praise
                Hungarian for its logical, agglutinating patterns and its rich
                vocabulary that is hard to compare to any other language in the
                world.
            </p>
        </div>
    </div>
    <section class="about_one">
        <h1><li>Hungarian-born native teacher living in the UK.</li></h1>
        <h1>
            <li>
                I am trained in teaching both Hungarian and English, and have
                graduated with an English and American Studies Degree
            </li>
        </h1>
        <h1>
            <li>Services available through English or Hungarian medium</li>
        </h1>
    </section>
</main>
</body>

问题出在flex容器的对齐方式以及你给html和body设置的height:100%上。当图片宽度缩小后，flex容器的高度可能没有自适应内容，加上body的100%高度限制，导致底部出现空白。可以按以下步骤修复：

• 移除html, body里的height:100%设置
  这个强制高度会让页面内容超出时，容器高度不自动扩展，反而留出空白。

• 给弹性容器添加align-items: flex-start
  默认flex容器的align-items是stretch，会让子元素高度拉伸到容器最高的元素高度。当图片缩小后，文本区域高度可能还是原来的，导致容器高度被拉长，加上body的100%限制，就会出现空白。设置align-items: flex-start让子元素顶部对齐，容器高度自适应内容。

• 修复媒体查询里的line-height写法
  你写的line-height:15vw/3是错误的，应该用calc(15vw / 3)，否则浏览器会把它当成一个无效值，继承默认行高，可能也会影响布局高度。

修改后的完整CSS代码：

html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.about_container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.about_container img {
  width: 600px;
  margin-left: 20px;
  margin-top: 20px;
}

.about_container p {
  margin-left: 20px;
}

p {
  font-size: 30px;
  font-weight: 350;
  font-family: "LiberationSansRegular";
  font-style: normal;
  text-align: right;
  margin-top: 50px;
  margin-right: 50px;
}

p span {
  font-weight: bolder;
}

.second_p {
  text-align: left;
}

.about_one {
  background-color: #ebe5dd;
  border: 1px solid rgb(102, 94, 94);
}

.about_one h1 {
  font-size: 28px;
  padding-left: 20px;
  line-height: calc(15vw / 3);
}

/*___________MEDIA QUERIES___________  */
@media screen and (max-width: 1550px) {
  .about_one h1 {
    font-size: 24px;
    line-height: calc(15vw / 3);
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 1460px) {
  .about_container img {
    width: 450px;
  }
  p {
    font-size: 24px;
  }
  .about_one h1 {
    font-size: 24px;
    line-height: calc(15vw / 3);
    margin-bottom: 40px;
  }
}

• html, body的height:100%会强制页面高度等于当前视口高度，当页面实际内容高度超过视口时，容器无法自动扩展高度，从而在底部留出空白区域。
• flex容器默认的align-items: stretch属性会让所有子元素拉伸到与容器内最高元素相同的高度。图片宽度缩小后，其高度按比例降低，但文本区域高度不变，导致flex容器被文本区域的高度撑高，再加上body的100%高度限制，就会出现底部空白。设置align-items: flex-start后，子元素顶部对齐，容器高度会自适应子元素的实际高度，不会被强制拉伸。
• 媒体查询中的line-height:15vw/3属于无效语法，浏览器无法正确解析，会导致行高异常，间接影响布局高度，修复为calc(15vw / 3)后才能正确计算行高值。

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