如何使用flex处理图像后的空白？答案

【问题标题】：How to deal with white spaces after the image using flex?如何使用flex处理图像后的空白？
【发布时间】：2022-01-19 03:27:47
【问题描述】：

当我们处理桌面版本时一切看起来都很好，但是在转到 mobile 版本之后，图像出现了一些奇怪的空间，但我设置了 height: 100%，但它仍然附加图像下方的一些空白区域，无论高度如何。

我附上了一张它的外观照片，当我们达到小于 768 像素时，您可以在图像后面看到一个空白区域。

HTML代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="./css/utilities.css">
      <link rel="stylesheet" href="./css/main.css">
      <link rel="stylesheet" media="screen and (max-width: 768px)" href="./css/mobile.css">
      <title>Blog</title>
   </head>
   <body>
      <section id="blog1">
      <div class="row">
         <div class="column">
            <img src="./img/blog/blog1.jpg" alt="">
         </div>
         <div class="column bgLight">
            <div class="column2">
               <h2>
               Blog Post One</h4>
               <p class="meta">
                  <i class="fas fa-user"></i> Posted by <strong>John Doe</strong> | April 19 2020 
               </p>
               <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic suscipit eligendi
                  exercitationem doloribus animi quasi sint quod, asperiores sed numquam saepe fuga, odit
                  vitae praesentium ea error! Esse voluptas laborum ratione minus blanditiis! Est,
                  voluptate? Veritatis ipsum natus quas ducimus.
               </p>
            </div>
         </div>
      </div>
   </body>

CSS 主要代码：

.row {
    display: flex;
}

.column1, .column2 {
    height: 100%;
}


.row .column {
    flex: 1;
    flex-basis: 100%;
}

.column2 {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 2rem;
}

img {
    width: 100%;
    height: 100%;

}

CSS 移动代码：

.column  {
    max-width: 100%;
    flex: 100%;
}

.row {
    flex-direction: column;
}

【问题讨论】：

标签： html css image flexbox height

【解决方案1】：

将您的 .column 更改为

.column {
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;}

和你的img到

img {
  flex: 1;
  height: 100%;}

【讨论】：

非常感谢，但你能告诉我为什么它现在有效，但在我的情况下它没有？