CSS: having a div with absolutely positioned images in them fill it's parent without overflow

Issue

For a new project I have a construct where I have a div (let's call it parent) that contains another div (let's call it child) in which images are placed that are absolutely positioned to fit a certain way on top of each other.

I want to achieve however that the child fills the parent entirely, center positioned with a min-width of 100% and a min-height of 100% and the overflow hidden, so the child would seem like an image with an object-fit cover and an object-position center. However, after a long night and a lot of trial and error, I can't seem to achieve this correctly. (i might have already added a wrapper too many)

The parent's

Here's the relevant code:

<div class="parent" style="height: calc(100vw - 20px); border-radius: 20px; border:1px solid red;">
        <div class="child" style="width: 100%; height: 100%; position: relative; overflow:hidden;"><div class="2d-picture-wrapper" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); perspective: calc(19.6vw + 100px);">
           <img src="https://youreka-virtualtours.be/images/objects/389/producten/vlag.png" style="width: 100%" class="2d-picture-base-image">
           <img src="https://youreka-virtualtours.be/images/sessions/389/200/2560px-KPN-Logo.svg.png" style="position: absolute; object-fit: contain; object-position: center; width: 12.6%; height: 10.2%; left: 34.2%; top: 41.3%; transform: rotateX(0.8deg) rotateY(51.5deg) rotateZ(0.7deg) translate(-50%, -50%); transform-style: preserve-3d; transform-origin: center;" class="2d-picture-logo">
        </div>
    </div>
</div>

Solution

First of all a note, your classes should not start with a number since this is not allowed as stated on w3.org:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Then to your actual problem: The "child" element is already filling the entire parent. But your base image does not. Add the following properties to it:

  // fill the entire child with the image
  width: 100%;
  height: 100%;

  // set cover and center the whole image
  object-fit: cover;
  object-position: center;

  // "hide" the corners to fit to your parent border
  border-radius: 20px;

Full example (note I've separated HTML and CSS to make it more readable, also fixed the classes)

.parent {
  height: calc(100vw - 20px);
  border-radius: 20px;
  border: 1px solid red;
}

.child {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.picture-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  perspective: calc(19.6vw + 100px);
}

.picture-base-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.picture-logo {
  position: absolute;
  object-fit: contain;
  object-position: center;
  width: 12.6%;
  height: 10.2%;
  left: 30.2%;
  top: 41.3%;
  transform: rotateX(0.8deg) rotateY(51.5deg) rotateZ(0.7deg) translate(-50%, -50%);
  transform-style: preserve-3d;
  transform-origin: center;
}

<div class="parent">
  <div class="child">
    <div class="picture-wrapper">
      <img src="https://youreka-virtualtours.be/images/objects/389/producten/vlag.png" class="picture-base-image">
      <img src="https://youreka-virtualtours.be/images/sessions/389/200/2560px-KPN-Logo.svg.png" class="picture-logo">
    </div>
  </div>
</div>

Answered By - Alex Berger