Inconsistent Positioning Of Elements Across Document

On this page of the document, I need the images to be arranged messily on the page. My approach is to adjust each one via top and left percentage values. The figure elements are be

Solution 1:

I created example here which do not change format of boxes and images. So, first image will have still the same format: 3:2.

• box(es) are positioned absolutely to document (topleft corner), width is also calculated from document size.
• box-border(s) create right format of boxes.
• image-wrapper(s) create position for images - and it should be positioned over the hidden corner.
• image-size(s) create right format of images
• img use object-fit, which is not compatible with all browsers. If you are looking for for something, what will work on every modern browser, you can use background css style. There is also nice workaround, if you also need img tag for SEO (find Solution 2): Is there an equivalent to background-size: cover and contain for image elements?

#boxes-wrapper {
  position: relative;
  width: 100%;
  padding-top: 63.12%;
}
#box1,
#box2,
#box3,
#box4,
#box5,
#box6 {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 0;
}
.box-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-box-shadow: 0002px#5f2325;
  -moz-box-shadow: 0002px#5f2325;
  -ms-box-shadow: 0002px#5f2325;
  -o-box-shadow: 0002px#5f2325;
  box-shadow: 0002px#5f2325;
}
.image-wrapper {
  position: absolute;
  height: 0;
}
.image-size {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.image-sizeimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#box1 {
  top: 21.48%;
  left: 4.88%;
  width: 24.54%;
}
#box1.box-border {
  padding-top: 67.96%;
}
#box1.image-wrapper {
  bottom: -2.5%;
  left: -3.05%;
  width: 92.52%;
}
#box1.image-size {
  padding-top: 66.46%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
#box2 {
  top: 31.36%;
  left: 36%;
  width: 19%;
}
#box2.box-border {
  padding-top: 67.8%;
}
#box2.image-wrapper {
  top: -7.85%;
  left: -10.68%;
  width: 92.52%;
}
#box2.image-size {
  padding-top: 66.54%;
}
#box4 {
  top: 54.67%;
  left: 1.42%;
  width: 24.61%;
}
#box4.box-border {
  padding-top: 67.77%;
}
#box4.image-wrapper {
  bottom: -11.38%;
  left: 10.74%;
  width: 66.94%;
}
#box4.image-size {
  padding-top: 104.12%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}

<divid="boxes-wrapper"><divid="box1"><divclass="box-border"><divclass="image-wrapper"><divclass="image-size"><imgsrc="http://dummyimage.com/450x300/eee/333333.png" /></div></div></div></div><divid="box2"><divclass="box-border"><divclass="image-wrapper"><divclass="image-size"><imgsrc="http://dummyimage.com/450x300/eee/333333.png" /></div></div></div></div><divid="box4"><divclass="box-border"><divclass="image-wrapper"><divclass="image-size"><imgsrc="http://dummyimage.com/450x469/eee/333333.png" /></div></div></div></div></div>

EDIT: Added boxes-wrapper, because of problem with 2nd row.