Four images in equal four square boxes

four-quadrant-image.css

.parent {
  position: relative;
}

.wrapper {
  display: block;
  width: 50%;
  position: absolute;
  overflow: hidden;
}

.wrapper.img-1 {
  top: 0;
  left: 0;
  bottom: 50%;
}
.wrapper.img-2 {
  top: 0;
  left: 50%;
  bottom: 50%;
}
.wrapper.img-3 {
  top: 50%;
  left: 0;
  bottom: 0;
}
.wrapper.img-4 {
  top: 50%;
  left: 50%;
  bottom: 0;
}