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

Question

当我们处理桌面版本时一切看起来都很好，但是在进入移动版本之后，图像出现后有些奇怪space，但我已经设置高度：100%，但它仍然会在图像下方添加一些白色 spaces，无论高度如何。

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

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;
}

Answer 1

将您的 .column 更改为

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

和你的 img

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

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

How to deal with white spaces after the image using flex?

html

css

image

flexbox

height