响应的背景图像与7 divs

Question

我已经用普通的html和css制作了这个设计。

这是一个整体背景图像，其中有7个div，占据文本的中心位置。

这里是代码，但是我可以将此响应作为窗口大小更改，因为如果窗口更改发生它将会中断。我只是使用普通的CSS。甚至没有引导。任何帮助和帮助都将对我有很大的帮助。感谢。

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>

Answer 2

我认为这就是你要找的东西。注意我使用min-aspect-ratio媒体查询来说明滚动条的存在，但这假定：

• #main是您网页的唯一元素（可能不是这种情况）
• 滚动条在非触摸设备上占用了17px（如在Chrome和Firefox中）

最有可能的是，您要删除该查询，尤其是如果您不关心框的宽度/高度的绝对1/1比率。如果你这样做，你可能会更安全地使用javascript检测触摸设备和宽高比，特别是Modernizr。

我使用flex来定位每个盒子的内容，但保留了盒子的浮动。

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden;
  margin-left: -1px;
}

#main > * {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s cubic-bezier(.4,0,.2,1);
}
#main > *:hover {
  background-color: rgba(255,255,255,.35);
  cursor: pointer;
}
#main > *:first-child {
  height: calc((100vw / 2) - 1px);
}
body {
  margin: 0;
}
@media  (min-aspect-ratio: 2/1)  { 
  #main > * {
    height: calc((100vw / 4) - 5px);
  }
  #main > *:first-child {
    height: calc((100vw / 2) - 9px);
  }
}

<div id="main">
  <div> Excellence </div>
  <div> Quality </div>
  <div> Efficiency </div>
  <div> Creativity </div>
  <div> Faith </div>
  <div> Effectiveness </div>
  <div> Teamwork </div>
</div>

不知道为什么，但我以为你想让你的盒子成为正方形，所以我用它滚动。如果你想让它们的高度始终是屏幕高度的一半，我就是这样做的：

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden;
  margin: -1px 0 0 -1px;
}

#main > * {
  width: calc((100% / 4) - 1px);
  height: calc(50vh - 0.5px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s cubic-bezier(.4,0,.2,1);
}
#main > *:hover {
  background-color: rgba(255,255,255,.35);
  cursor: pointer;
}
#main > *:first-child {
  height: 100vh;
}
body {
  margin: 0;
}

<div id="main">
  <div> Excellence </div>
  <div> Quality </div>
  <div> Efficiency </div>
  <div> Creativity </div>
  <div> Faith </div>
  <div> Effectiveness </div>
  <div> Teamwork </div>
</div>

请注意，提议的解决方案都不会扭曲背景图像。它最适合cover #main，并且可以超额完成。

但让我们回到什么是响应方式。响应并不意味着您的图像在移动设备上缩小。这意味着您的内容可在移动设备上访问和使用。因此，您可能希望将列从四个划分为两个，并将它们显示在彼此之下，以便在非常狭窄的设备上内容保持可读性。说...低于540px宽度：

body {
  margin: 0;
  background-color: darkgray
}

#main {
  background: black url("https://source.unsplash.com/random/1000x400") no-repeat center center /cover; 
  overflow: hidden;
  margin-left: -1px;
}

#main > * {
  width: calc((100% / 4) - 1px);
  height: calc((100vw / 4) - 1px);
  float: left;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -1px -1px 0 0;
  float: left;
  color: white;
  background-color: rgba(255,255,255,0);
  transition: background-color .4s cubic-bezier(.4,0,.2,1);
}
#main > *:hover {
  background-color: rgba(255,255,255,.35);
  cursor: pointer;
}
#main > *:first-child {
  height: calc((100vw / 2) - 1px);
}
body {
  margin: 0;
}

@media (max-width: 539px) {
  #main>* {
    width: calc((100% / 2) - 1px);
    height: calc((100vw / 2) - 1px);
  }
  #main>*:first-child {
    height: calc(100vw - 1px);
  }
}

<div id="main">
  <div> Excellence </div>
  <div> Quality </div>
  <div> Efficiency </div>
  <div> Creativity </div>
  <div> Faith </div>
  <div> Effectiveness </div>
  <div> Teamwork </div>
</div>

这就是我所说的响应。