Question

The bounty expires in 5 days. Answers to this question are eligible for a +50 reputation bounty. Eve Ninnall wants to draw more attention to this question.

我不知道这部法律如何写进。

How do I do that here? https://jsfiddle.net/37qob51s/

I tried asking AI, but it wasn t able to help.

Anyone know how this would be done?

我被告知可以这样做。

我正在做的是,将<条码>直截了当: 1;改为<条码>。 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 isn t pavention-top:56.25%/code>, 载于pavention-top:<100%/code>。


56.25%相当于aspect-ratio: 缩略语

第二,这部法典之所以没有发挥作用有两个原因。

除非有<条码> 显示:inline-block或<条码> 显示:block

http://www.ohchr.org。 你的间隔有预设的高度(!),不是预先界定的宽度,因此,如果你想要使用<条码>,则你需要用预先规定的宽度重新整整条,而不是<条码>。

这就是说, 您可使用<条码>第8条:100%<>条码>和<条码>,以保持相关比例。只有在使用<条码>时:0px;width:100%;。它将发挥作用,但这样做将需要从零开始重建整个设计。

显示问题的守则:

Answer 2

Simply replace aspect-ratio: 1 with aspect-ratio: 16/9.

使用<条码>dding/条码,以形成具有固定方面比率的内容,是在社会保障局提供适当支持之前使用的黑板。为了达到响应性的16:9项内容,我们用于具体规定<条码>:56.25%和<条码>:0。今后请使用<条码>直截了当>。

: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: 16/9;
  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>

友情链接