'trying to split homepage into four parts

I'm trying to divide my homepage into four even images with no scroll. as you click on the website I would like the four images to fill the entire screen and have no scroll. Here's how far I am now but it's not quite working. Any suggestions?

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>

My Code Here

html css image

Solution 1:^[1]

Right, here is how I would do it. I'd make 4 boxes and position them in each quarter of the screen. Then I'd give each one a background image that is set to stay centred and to cover the entire box.

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

Hope this is helpful.

Solution 2:^[2]

    Is your looking ?

.containermenu{width:25%;float:left}
.containermenu img
{
width: 100%;
height: auto;
float: left;
}

Click here!

Solution 3:^[3]

If you want to remain the proportion, you could use the images as backgrounds in CSS and use

background-size: cover;

Solution 4:^[4]

In your CSS you are trying to use viewport sizing, so you have to set the meta to be available to use it, and body height and width to 100%, besides setting padding and margin to 0 to remove white bordering as @Andrew Bone suggested.

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

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;
}

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
<title>The Steve Barrett Collection</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <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>
</body>
</html>

Solution 5:^[5]

There are two different ways you could to do to achieve this result

With images

If you want to work with images you could make use of the object-fit: cover property. The great thing about this is that it acts like the background-image: cover but you can set it directly to an image and it doesn't get stretched. There is also a object-position property. Sadly this great feature is not fully supported by the one and only Internet Explorer and even Edge.

HTML

<div id="container">
  <img src="https://static.pexels.com/photos/32237/pexels-photo.jpg" alt="" />
  <img src="https://static.pexels.com/photos/30168/pexels-photo-30168.jpg" alt="" />
  <img src="https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg" alt="" />
  <img src="https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg" alt="" />
</div>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  background: #000;
  font-size: 0;
  overflow: hidden;
}

#container img {
  width: 50%;
  height: 50%;
  display: inline-block;
  object-fit: cover;
  object-position: center;
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}
#container img {
  width: 50%;
  height: 50%;
  display: inline-block;
  object-fit: cover;
  object-position: center;
}

<div id="container">
  <img src="https://static.pexels.com/photos/32237/pexels-photo.jpg" alt="" />
  <img src="https://static.pexels.com/photos/30168/pexels-photo-30168.jpg" alt="" />
  <img src="https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg" alt="" />
  <img src="https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg" alt="" />
</div>

With background images

One small disadvantage is that you have to set the path of the images in the CSS but the big advantage is that you can make use of the background-size: cover which is supported in every browser. Here you can also make use of the nth-child selector so you don't have to give each div, in this case .img a class left, right or something.

HTML

<div id="container">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

CSS

html,
body {
   height: 100%;
}

body {
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}

#container .img{
  width: 50%;
  height: 50%;
  display: inline-block;
  background-size: cover;
}

.img:nth-child(1){
  background-image: url(https://static.pexels.com/photos/32237/pexels-photo.jpg);
}

.img:nth-child(2){
  background-image: url(https://static.pexels.com/photos/30168/pexels-photo-30168.jpg);
}

.img:nth-child(3){
  background-image: url(https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg);
}

.img:nth-child(4){
  background-image: url(https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}
#container .img {
  width: 50%;
  height: 50%;
  display: inline-block;
  background-size: cover;
  background-position: center;
}
.img:nth-child(1) {
  background-image: url(https://static.pexels.com/photos/32237/pexels-photo.jpg);
}
.img:nth-child(2) {
  background-image: url(https://static.pexels.com/photos/30168/pexels-photo-30168.jpg);
}
.img:nth-child(3) {
  background-image: url(https://static.pexels.com/photos/164241/pexels-photo-164241.jpeg);
}
.img:nth-child(4) {
  background-image: url(https://static.pexels.com/photos/230800/pexels-photo-230800.jpeg);
}

<div id="container">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Prasanth S
Solution 3	user7167236
Solution 4	Dez
Solution 5

'trying to split homepage into four parts

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]