当我最小化浏览器时，背景颜色不会跟随我的图片答案

【问题标题】：When I minimize my browser the background color doesn't follow my picture当我最小化浏览器时，背景颜色不会跟随我的图片
【发布时间】：2021-12-15 03:04:57
【问题描述】：

我在我的学校活动网站上工作，我尝试调整我的背景大小，它需要像我放置的图片一样做出响应，但是当我运行代码时它不跟随图片。我也尝试了媒体查询，但它不起作用，请帮助。

这里是 html & css 代码：

*{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
 /* project*/

 #project {
   background: #033541;
   width: 100%;
   height: 100vh;
   overflow-x: hidden;
}


.project-title h2{
    color: white;
    font-size: 75px;
    margin: 30px auto;
    text-align: center;
   font-family: 'Poppins', sans-serif;
}

.gallery {
   padding: 30px;
   position: absolute;
   justify-content: center;
   align-items: center;
   width: 98vw;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 230px));
   column-gap: 15px;
   row-gap: 15px;
}


.gallery img {
    
   border-radius: 10px;
    width: 230px;
    height: 230px;
    object-fit: cover;
    object-position: center;
 }

<!----project start---->
<div id = "project">
    <div class = "pro">
        <div class="project-title">
        <h2>PROJECT</h2>
        </div>
        <div class="gallery">
        <img src = "image1.jpg" />
        <img src = "image2.jpg" />
        <img src = "image3.jpg" />
        <img src = "image4.jpg" />
        <img src = "image5.jpg" />
        <img src = "image6.jpg" />
        <img src = "image7.jpg" />
        <img src = "image8.jpg" />
        </div>
        </div>
</div>

【问题讨论】：

标签： html css background minimize responsiveness

【解决方案1】：

将height: auto 用于#project 并将position: absolute 更改为position: relative 以用于.gallery。

因为使用position: relative 使position: absolute 没有任何父元素表明这些元素是根据视口（或屏幕）定位的，所以它们与父元素无关。
所以高度只跨越到父元素而不考虑它们

如果您只是删除 position 并添加 height: auto。它也可以工作

*{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}
 /* project*/

 #project {
   background: #033541;
   width: 100%;
   height: auto;
   overflow-x: hidden;
}


.project-title h2{
    color: white;
    font-size: 75px;
    margin: 30px auto;
    text-align: center;
   font-family: 'Poppins', sans-serif;
}

.gallery {
   padding: 30px;
   position: relative;
   justify-content: center;
   align-items: center;
   width: 98vw;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(230px, 230px));
   column-gap: 15px;
   row-gap: 15px;
}


.gallery img {
    
   border-radius: 10px;
    width: 230px;
    height: 230px;
    object-fit: cover;
    object-position: center;
 }

<!----project start---->
<div id = "project">
    <div class = "pro">
        <div class="project-title">
        <h2>PROJECT</h2>
        </div>
        <div class="gallery">
        <img src = "image1.jpg" />
        <img src = "image2.jpg" />
        <img src = "image3.jpg" />
        <img src = "image4.jpg" />
        <img src = "image5.jpg" />
        <img src = "image6.jpg" />
        <img src = "image7.jpg" />
        <img src = "image8.jpg" />
        </div>
        </div>
</div>

【讨论】：