CSS以固定比例创建元素[重复]答案

【问题标题】：CSS to create element with fixed ratio [duplicate]CSS以固定比例创建元素[重复]
【发布时间】：2016-05-05 00:33:37
【问题描述】：

我想创建一个 HTML 页面：

左侧固定宽度、全高的导航窗格
剩余区域中心的方形元素

我希望这个正方形尽可能大，扩大以填充导航窗格未占用的区域。

我对此有一个 JavaScript 解决方案（见下文，jsFiddle），但我希望可以将其作为纯 CSS 解决方案。

<!DOCTYPE html>
<html lang=en>
<head>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      background-color: #fff;
    }
    nav {
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      position: absolute;
      background-color: #000;
      color: #fff;
    }
  </style>  
</head>

<body>
<nav>
  Navigation
</nav>

<main>
  This should be square
</main>

<script>
;(function createSquareArea() {
  var main = document.querySelector("main")
  var nav = document.querySelector("nav")
  var navWidth = nav.getBoundingClientRect().width
  var debounceDelay = 100
  var timeout

  window.onresize = windowResized
  maintainRatio()

  function windowResized() {
    if (timeout) {
      window.clearTimeout(timeout)
    }
    timeout = window.setTimeout(maintainRatio, debounceDelay)
  }

  function maintainRatio() {
    timeout = 0

    var windowHeight = window.innerHeight
    var mainWidth = window.innerWidth - navWidth
    var minDimension = Math.min(windowHeight, mainWidth)

    var left = (mainWidth - minDimension) / 2 + navWidth
    var top = (windowHeight - minDimension) / 2

    main.style.left = left + "px"
    main.style.top = top + "px"
    main.style.width = minDimension + "px"
    main.style.height = minDimension + "px"
  }
})()
</script>
</body>
</html>

【问题讨论】：

这与您链接到的 [维护纵横比问题] (stackoverflow.com/questions/20590239/…) 不同，因为它需要垂直导航窗格，因此不能直接使用视口单位。

标签： css centering aspect-ratio

【解决方案1】：

这可以通过视口单元来完成。

HTML

<div class='page-wrapper'>
  <nav>

  </nav>
  <div class='content'>
    <div class='square'>

    </div>
  </div>
</div>

CSS

body, html
{
  height: 100%;
}

.page-wrapper
{
  display: flex;
  height: 100%;
  width: 100%;
}

nav
{
  height: 100%;
  width: 200px;
  background-color: #444;
}

.content
{
  flex-grow: 1;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.square
{
  width: 100vh;
  height: 100vh;
  background-color: #111;
  max-width: calc( 100vw - 200px );
  max-height: calc( 100vw - 200px );
}

查看这个 jsFiddle https://jsfiddle.net/ryannwarner/hugt40cm/

【讨论】：

这给出了一个固定大小为 200 x 200 像素的正方形。调整窗口大小时，正方形不会调整其大小以填充可用区域。
我更深入了。它是父级，<div class='content'> 正在调整大小以填充所有剩余空间。
你的.content div 不一定是正方形的。
我明白你的意思，我已经更新了我的小提琴。
现在，如果窗口不够宽，方块会与导航窗格重叠

【解决方案2】：

JSFiddle：https://jsfiddle.net/ymzq6zm0/7/

HTML

<nav>
  Navigation
</nav>

<main>
  <div class="sc">
    This should be square
  </div>
</main>

CSS

   html, body {
      margin: 0;
      height: 100%;
      background-color: #fff;
    }
    .wrapper {
      display: flex;
      align-items: center;
      height: 100%;
    }
    nav {
      float: left;
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      float: left;
      width: calc(100% - 96px);
      height: 100vmin;
      max-height: calc(100vw - 96px);
    }
    .sc {
      margin: 0 auto;
      background-color: #000;
      color: #fff;
      height: 100vmin;
      width: 100vmin;
      max-width: 100%;
      max-height: calc(100vw - 96px);
    }

工作原理

我们的主要目标是：

居中对齐.sc
.sc 垂直居中对齐
确保.sc 始终是一个正方形
让.sc 响应式

正方形响应迅速，因为它会根据窗口或视口的高度和宽度改变其高度和宽度。我们需要使用vw（视口宽度）和vmin（视口高度和宽度之间的最小值）。在此处阅读有关这些单元的更多信息：https://css-tricks.com/viewport-sized-typography/

要使.sc 成为正方形，我们需要确保其宽度和高度始终相等。由于视口的高宽比并不总是相同的，所以我们需要找出这两者之间的最小值并将它们分配给.sc，这可以使用上面提到的vmin单元来完成。

在左侧导航后，正方形应始终保持在剩余区域的中心，切勿越过剩余区域并相应调整大小。

这可以通过以下代码来完成：

    nav {
      float: left;
      height: 100%;
      width: 96px;
      background-color: #666;
    }
    main {
      float: left;
      width: calc(100% - 96px);
      height: 100vmin;
      max-height: calc(100vw - 96px);
    }
    .sc {
      margin: 0 auto;
      background-color: #000;
      color: #fff;
      height: 100vmin;
      width: 100vmin;
      max-width: 100%;
      max-height: calc(100vw - 96px);
    }

main 是导航后的剩余区域。我们通过使用 calc 属性从 100% 中减去 nav 宽度来确保这一点。

.sc 放置在 main 内，我们添加了额外的 max-width 和 max-height 属性以确保 .sc 始终根据 main 调整自身大小。

.sc 的max-height: calc(100vw - 96px); 属性始终等于main 的width: calc(100% - 96px); 属性。它们都计算相同的值。

通过将max-width: 100%; 添加到.sc，我们确保它的最大宽度等于main 的最大宽度。

现在，max-height 和 max-width 以及 .sc 的宽度和高度都保持不变，它始终是一个正方形。

最后，我们将nav 和main 都放在.wrapper 中，这是一个弹性盒子并具有align-items: center; 属性。这将确保正方形始终相对于nav 垂直居中。

【讨论】：

差不多——但是如果窗户很高，那么右边的正方形就会被切掉。
@JamesNewton 我已经更新了答案以确保框始终是正方形。
不错！现在该框始终是正方形，但它不在高页面上垂直居中。
@JamesNewton 我已经更新，让它完全按照你想要的方式工作。
太棒了！感谢您坚持让它发挥作用。

【解决方案3】：

视口单位和calc 可以做很多这样的事情，但我不确定你最终想要的结果。

如果您希望重新计算两个维度，将需要 javascript。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #fff;
}
nav {
  height: 100%;
  width: 96px;
  background-color: #666;
}
main {
  position: absolute;
  background-color: lightgreen;
  color: #fff;
  top: 0;
  left: 96px;
  height: calc(100vw - 96px);
  max-height: 100vh;
  width: calc(100vw - 96px);
  max-width: 100vh;
}

<nav>
  Navigation
</nav>

<main>
  This should be square
</main>

JSfiddle demo 没有max-height...我认为您可以通过 CSS 方法看到问题。

【讨论】：

您的绿色元素仍然是正方形，但它始终与导航窗格的边缘齐平，而不是居中。
你想要多少空间...你没有说。这只是调整 calc 值以适应任何间距的问题。正如我所说，我们不知道这应该是什么样子。无论如何，如果尺寸是由任一高度或宽度（以较小者为准），则需要js来计算。
我提供了一个jsFiddle，它准确地显示了我希望它的行为方式。
不...您显示的是矩形...不是正方形。制作正方形很简单，但您没有说明任何关于尺寸的最小/最大要求。那里的小提琴不清楚。
我的 jsFiddle 中的黑色 正方形 总是尽可能高和尽可能宽。如果包含它的白色矩形很高，那么正方形就是全宽。如果白色矩形很宽，那么正方形就是全高。正方形“尽可能大，扩展以填充导航窗格未占用的区域”。你看到了什么不同的东西吗？