删除纵横比并使用 padding-top：56.25%；相反

Question

如何写入代码，我不知道。

我在这里该怎么做？ https://jsfiddle.net/37qob51s/

我尝试询问 AI，但没有帮助。

有人知道如何做到这一点吗？

有人告诉我这是可以做到的。

我所做的就是在代码中将

aspect-ratio: 1;

替换为

padding-top: 56.25%;

。

:root {
  --color-a: #1155cc;
  --color-b: black;
  --color-c: #1155cc;
  --color-d: black;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #121212;
  padding: 50px 8px;
}

.panel-left,
.panel-right {
  position: fixed;
  height: 100%;
  width: 50%;
  top: 0%;
  overflow: hidden;
  z-index: 0;
  transform: translateX(0);
  transition: transform 3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 1s;
}

.panel-left {
  left: 0;
}

.panel-right {
  right: 0;
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: fixed;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background: black;
}

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

body:hover .panel-left {
  transform: translateX(-100%);
}

body:hover .panel-right {
  transform: translateX(100%);
}
.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;
}

<div class="panel-left">
  <div class="inner"><span></span></div>
</div>

<div class="panel-right">
  <div class="inner"><span></span></div>
</div>

Answer 1

首先，

aspect-ratio:1

的等价物不是

padding-top:56.25%

，而是

padding-top:100%

。

56.25%

相当于

aspect-ratio: 16/9;

，是一个矩形。

其次，这段代码不起作用的原因有很多，从

spans can't use padding, unless they have display:inline-block;

到

padding-top works to define an aspect-ratio if you're using a pre-defined width and an 'auto' height

，这与你在这里所做的完全相反。你的跨度有一个预定义的高度（!!），而不是预定义的宽度，因此如果你想使用

padding-top

，你将需要使用预定义的宽度从头开始重新构建整个东西而不是

aspect-ratio

。

也就是说，使用

height:100%

时，不能使用

padding-top

来保持宽高比。仅当使用

height:0px

和

width:33.333vh

时，但这似乎会导致其自身的一系列问题。