html - 具有 7 个 div 的响应式背景图片

Question

我已经用纯 html 和 css 制作了这个设计。

它是一个完整的背景图片，中间有 7 个 div，中间是文字。

这是代码，但是我可以让它随着窗口大小的变化而响应，因为如果发生窗口变化，它就会中断。我只是在使用普通的 CSS。甚至没有 Bootstrap 。任何帮助和协助都会对我有很大的帮助。谢谢。

HTML

body {
  background-color:black;
}

#main {
  background-image: url("./girl-jump.png"); 
  background-size: cover;	
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 452px;
  width: 1021px; 
}

html {
  height: 100%;
}

#first {
  height: 452px;
  width: 234px;
  float:left; 
  border-right:2px solid white;
}

#second {
  height: 225px;
  width: 263px;
  overflow:hidden;  
  float:left;
  border-right:2px solid white;
  border-bottom:1px solid white;
}

#third {
  height: 225px;
  width: 263px;
  overflow:hidden;  
  float:left;
  border-right:2px solid white;
  border-bottom:1px solid white;
}

#fourth {
  height: 225px;
  width: 261px;
  overflow:hidden;  
  float:left;
  border-right:2px solid white;
  border-bottom:1px solid white;
}

#fifth {
  height: 227px;
  width: 263px;
  overflow:hidden;  
  float:left;
  border-right:2px solid white;
  border-top:1px solid white;
}


#six {
  height: 225px;
  width: 263px;
  overflow:hidden;  
  float:left;
  border-right:2px solid white;
  border-top:1px solid white;
}

#seventh {
  height: 225px;
  width: 261px;
  overflow:hidden; 
  border-right:2px solid white; 
  border-top:1px solid white;
}

.center-text {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  text-align: center;
}
.center-text {
  color:white;
}

<div id="main">
  <div id="first">
  <p class="center-text">Excellence</p>
  </div>  

  <div id="second">
    <p class="center-text">Quality</p>
  </div>  


  <div id="third">
      <p class="center-text">Efficiency</p>
  </div>  

   <div id="fourth">
      <p class="center-text">Creativity</p>
  </div>  


  <div id="fifth">
      <p class="center-text">Faith</p>
  </div>  


  <div id="six">
      <p class="center-text">Effectiveness</p>
  </div>

  <div id="seventh">
      <p class="center-text">Teamwork</p>
  </div>
</div>

这是 fiddle

Answer 1

您可以切换到 flex 并避免使用这样的固定值:

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

#main {
  background-image: url("https://lorempixel.com/800/800/");
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  display: flex;
}

.part {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

#first {
  flex: 1;
  border-right: 2px solid white;
  align-items:center;
  display:flex;
}

#second,
#third,
#fourth,
#fifth,
#seventh,
#six {
  flex: 1;
  border-right: 2px solid white;
  border-top: 1px solid white;
  align-items:center;
  display:flex;
  
}


.center-text {
  color: white;
  text-align:center;
  flex:1;
}

<div id="main">
  <div id="first">
    <p class="center-text">Excellence</p>
  </div>
  <div class="part">
    <div id="second">
      <p class="center-text">Quality</p>
    </div>
    <div id="third">
      <p class="center-text">Efficiency</p>
    </div>
  </div>
  <div class="part">
    <div id="fourth">
      <p class="center-text">Creativity</p>
    </div>
    <div id="fifth">
      <p class="center-text">Faith</p>
    </div>
  </div>
  <div class="part">
    <div id="six">
      <p class="center-text">Effectiveness</p>
    </div>
    <div id="seventh">
      <p class="center-text">Teamwork</p>
    </div>
  </div>
</div>