如何用CSS计算当前视口的宽高比？ [重复]

Question

我需要以微型方式表示当前视口形状，根据纵横比适合 100% 的包含元素的宽度或高度。我想提供一个 HTML 结构如何适应屏幕的预览。

为此，我相信我需要确定屏幕的宽高比。当然，这可以使用 JavaScript 来完成，但就我而言，使用 CSS 来完成会更优雅。

它可能看起来像这样。在这里，我使用零高度技巧和提供纵横比的底部填充。它不起作用，因为

calc()

函数无法除以带单位的值。

.container {
  width: 240px;
  height: 160px;
  background: #ddd;
}

.vieweport-miniature {
  height: 0;
  padding-bottom: calc(100vw / 100vh); /* can't divide by viewport units */
  padding-bottom: 45%; /* for demonstration purposes only */
  max-width: 100%;
  max-height: 100%;
  background: pink;
}

<div class="container">
  <div class="vieweport-miniature"></div>
</div>

有很多问题都在问类似的问题，但它们往往有预定义的宽高比。这里我希望它动态匹配视口。

谢谢！

Answer 1

“我需要以微型方式表示当前视口形状，以适合包含元素。” “这里我希望它动态匹配视口”

由于迷你视口元素需要位于具有绝对尺寸的容器中，因此有必要使用这些“硬编码”值来计算迷你视口元素的大小，以便适合容器的周长。

如果您确实想要特定的比例，则可以对元素使用

使用零高度和

padding-bottom

技巧。动态调整视口很容易，只需分别将宽度和高度分配为

vw

和

vh

单位的相等值即可。当然，规模必须预先确定。例如，如果迷你视口元素是视口大小的一半，则尺寸应为 w: 50vw x h: 50vh。

除了使用前面提到的

vw

和

vh

单位（这是使用 CSS 获取视口尺寸的唯一方法）之外，还使用 CSS 函数

min()

以便迷你视口元素始终适合容器，参见图 I。

图一

.mini {
  /* This is 15% of viewport width, but will not exceed 240px */
  width: min(15vw, 240px);
  /* This is 15% of viewport height */
  height: 15vh;
}

以全页模式查看示例，iframe 中渲染的尺寸有点扭曲。 JavaScript 已添加到示例中仅用于演示目的，并不是问题解决方案的一部分。调整窗口大小并注意控制台 - 第一个数字是视口宽度/高度的商，第二个数字是

.mini

宽度/高度的商。请注意，它们非常接近（平均相差百分之一。）

/*~~~~~~~For Demonstration Purposes Only~~~~~~~*/

function getAR(e) {
  const vpw = window.innerWidth;
  const vph = window.innerHeight;

  const mini = document.querySelector('.mini');
  const mnw = Math.round(mini.getBoundingClientRect().width);
  const mnh = Math.round(mini.getBoundingClientRect().height);

  const vpar = vpw / vph;
  const mnar = mnw / mnh;
  console.log(vpar.toFixed(2), mnar.toFixed(2));
}

getAR();
window.onresize = getAR;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.box {
  width: 240px;
  height: 160px;
  background: lightgrey;
}

.mini {
  width: min(15vw, 240px);
  height: 15vh;
  background: pink;
}

<div class="box">
  <div class="mini"></div>
</div>