CSS FlexBox - 调整窗口大小时图像未调整大小答案

【问题标题】：CSS FlexBox - Image not resizing when resizing the windowCSS FlexBox - 调整窗口大小时图像未调整大小
【发布时间】：2021-10-02 09:22:57
【问题描述】：

在我的代码中，我使用 CSS Flexbox 将多个图像放在一行中。我以 rem 而不是 % 指定了图像大小，因为当我使用 % 时，在调整窗口大小后，一行中的图像数量保持不变，我不希望这样。相反，我希望当屏幕尺寸小于图像尺寸时，图像会根据屏幕尺寸调整其尺寸，并且每行只保留一个图像。

我面临的问题是，当我将窗口大小调整为小于图像大小时，整个图像不可见。我希望图像相应地缩小。

html{
    font-size:12px;
}

#heading{
    font-size:1.5rem;
    text-align:justify;
    width:80%;
    margin:auto;
    word-spacing:0.5rem;
    color:lightslategrey;
    margin-top:2rem;
    margin-bottom:3rem;
}

#gallery_header{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    color:blue;
    font-size:3rem;
    text-align:center;
    margin-bottom:2rem;
}

#gallery{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-evenly;
    width:80%;
    margin:auto;
}

.img_container{
    width:35rem;
    height:30rem;
    display:inline-block;
}

.img_container img{
    width:35rem;
    height:30rem;
    display:inline-block;
}

main{
    display:flex;
    width:100%;
    flex-direction:column;
    align-items:center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
          <link rel="stylesheet" type="text/css" href="styles.css">
          <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
    </head>
    <body>
    <div id="heading">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>  
    <div id="gallery_header">
        IMAGE GALLERY
    </div>
    <div id="gallery">
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture2.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        <div class="img_container">
            <img src="image/Picture1.png">
        </div>
        
    </div>
    <script src="script.js"></script>
    </body>
</html>

【问题讨论】：

标签： css flexbox frontend

【解决方案1】：

将以下代码添加到您的 CSS 中

@media (max-width: 767px){
  .img_container{
    height: 30rem;
    display: inline-block;
    width: 100%;
  }
  
  .img_container img{
    width: 100%;
    height: 30rem;
    display: inline-block;
  }
}

【讨论】：