Replacing aspect-ratio: 1; with, padding-top: 56.25%;

[htmlcssjavascript28]

How do I do that here? Edit fiddle - JSFiddle - Code Playground

All I am doing is replacing aspect-ratio: 1; with, padding-top: 56.25%; in the code.

.inner {
  height: 100%;
  width: 200%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.panel-right .inner {
  left: -100%;
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
  aspect-ratio: 1;
  margin: auto;
  height: 100%;
}

.inner:before {
  content: "";
  background: url(https://i.imgur.com/z5MMJnv.png);
}

.inner:after {
  content: "";
  background: url(https://i.imgur.com/8Jf8LLc.png);
}

.inner span {
  background: url(https://i.imgur.com/5u16syR.png);
  position: relative;
}

.inner span:before,
.inner span:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 0;
}

.inner span:before {
  background: url(https://i.imgur.com/ygTtvme.png);
  transform: translateX(-99.99%);
}

.inner span:after {
  background: url(https://i.imgur.com/QziKNDW.png);
  transform: translateX(99.99%);
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
  background-size: cover;
}

 

[Johna]

Hey there,
I'm not sure I understand your question. aspect-ratio and padding-top are 2 different unrelated things in CSS, I'm not sure what you mean by replace.
I assume you don't mean simply take out the aspect-ratio property and add a padding-top property.

 

[htmlcssjavascript28]

I mean using padding-top: 56.25%; instead of aspect-ratio in the code. That means removing aspect-ratio and using padding-top: 56.25%;

How that is written into the code, I don't know.

 

[Johna]

I'm not sure why you want to "replace", because aspect-ratio and padding-top are two completely different things that control entirely different properties of the element, but you can just remove the aspect-ratio property and add the padding-top property?

Here's the part of the code where the aspect-ratio property was:

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
  padding-top: 56.25%;  // remove `aspect-ratio: 1;` and add `padding-top: 56.25%;`
  margin: auto;
  height: 100%;
}

 

[tomliv]

If I recall correctly, 56.25% padding was a hacky way of controlling aspect ratio before aspect ratio was a thing in css. I believe that percentage was for 16x9 ratio images. Different percentages of padding were used for different ratios. An image was absolutely positioned in a div and the div was given the top padding, effectively giving a cropping frame around the image in a specific size ratio.

Aspect Ratio Boxes | CSS-Tricks

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the

css-tricks.com