当我最小化我的浏览器时，背景颜色不符合我的图片

Question

我正在我的学校 activity 网站上工作，我尝试调整我的背景大小，使其需要响应，就像我放置的图片一样，但是当我运行代码时它没有'不要按照图像。我也试过进行媒体查询，但是没有用，请帮忙。

这里是 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>

Answer 1

对 #project 使用 height: auto，对 .gallery 将 position: absolute 更改为 position: relative。

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

If you just remove position and add height: auto. It will also work

*{
    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>

当我最小化我的浏览器时，背景颜色不符合我的图片

When I minimize my browser the background color doesn't follow my picture

html

css

background

minimize

responsiveness