html - 试图将主页分为四个部分

我正在尝试将我的主页分成四个没有滚动的偶数图像。当您单击网站时，我希望这四个图像可以填满整个屏幕，并且没有滚动。这就是我现在所走的距离，但工作并不安静。有什么建议么？

img {
  max-width: 100%;
  height: auto;
}
#container {
  max-width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.containermenu img {
  width: 50%;
  height: auto;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
  <div class="containermenu">
    <img src="http://oi67.tinypic.com/vgmv80.jpg">
  </div>
</div>

我的代码Here

最佳答案

是的，这就是我要怎么做。我要制作4个盒子并将其放置在屏幕的每个四分之一位置。然后，给每个人一张背景图像，该图像设置为居中并覆盖整个盒子。

/* Sizing */
.containermenu {
  position: absolute;
  width: 50vw;
  height: 50vh;
  background-size: cover;
  background-position: center;
}

/* Images */
.tl {
  background-image: url(https://image.freepik.com/free-vector/bathroom-mosaic-pattern_23-2147497370.jpg);
}
.tr {
  background-image: url(https://image.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg);
}
.br {
  background-image: url(https://images.blogthings.com/whatpatternisyourbrainquiz/pattern-2.jpg);
}
.bl {
  background-image: url(https://static1.squarespace.com/static/5459ec52e4b04d305f68f1ed/t/548a96e1e4b0a10ad41ef12f/1418368738802/Pattern14.jpg?format=1000w);
}

/* Positioning */
.tl,
.tr {
  top: 0
}
.br,
.tr {
  right: 0
}
.bl,
.br {
  bottom: 0
}
.tl,
.bl {
  left: 0
}

<a href="#" class="containermenu tl"></a>
<a href="#" class="containermenu tr"></a>
<a href="#" class="containermenu br"></a>
<a href="#" class="containermenu bl"></a>

希望这会有所帮助。

关于html - 试图将主页分为四个部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40631815/