使用视口动态调整 3x3 方格的大小

Posted

技术标签:

【中文标题】使用视口动态调整 3x3 方格的大小【英文标题】：Dynamically resize a 3x3 grid of squares with the viewport 【发布时间】：2019-01-23 20:02:52 【问题描述】：

感谢您花时间了解我的困境。

我要做的是用 html/CSS 中其他方形 div 的 3x3 网格填充一个完美的方形 div。我希望容器居中，占据页面的整个高度（从不滚动）并动态调整大小，同时在调整视口大小时保持其纵横比。构成这个较大正方形的 9 个单元中的每一个都应动态调整大小并保持其纵横比。

这是我在真正陷入只有 WIDTH 受到影响的事实之前所得到的。当我调整窗口大小时，高度需要动态变化。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="homestyle-test.css">
</head>

<body>
<div class="mainframe">
  <div class="grid">
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Upper left</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>upper middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>upper Right</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
    <div class="content">
      <div class="content-inside">
        <p>middle Left</p>
      </div>
    </div>
  </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>middle Right</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Lower Left</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content">
        <div class="content-inside">
          <p>Lower middle</p>
        </div>
      </div>
    </div>
    <div class="grid__item">
      <div class="content content-lr">
        <div class="content-inside">
          <p>Lower Right</p>
        </div>
      </div>
    </div>
  </div>
</div>


</body>


</html>

CSS

* 
  box-sizing: border-box;



html
  background: url(home-assets/homebgtest.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;




.grid 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: start;

.grid > * 
  background: orange;
  width: 100%;

.grid > [style^='--aspect-ratio']::before 
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));

【问题讨论】：

【参考方案1】：

请根据您对完美正方形的要求查看下面的工作 sn-p，希望对您有所帮助:)

* 
  box-sizing: border-box;


body 
  margin: 0;


.wrap 
  max-width: 100vh;
  margin: 0 auto;

.grid 
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;


.grid>* 
  background: orange;
  padding: 20px;
  box-shadow: inset 0 0 0 1px #fff;

<div class="wrap">
  <div class="grid">
    <div class="grid__item">
      Upper left
    </div>
    <div class="grid__item">
      upper middle
    </div>
    <div class="grid__item">
      upper Right
    </div>
    <div class="grid__item">
      middle Left
    </div>
    <div class="grid__item">
      middle
    </div>
    <div class="grid__item">
      middle Right
    </div>
    <div class="grid__item">
      Lower Left
    </div>
    <div class="grid__item">
      Lower middle
    </div>
    <div class="grid__item">
      Lower Right
    </div>
  </div>
</div>

【讨论】：

您好 Girish，非常感谢您的帮助。但是，您版本中的框正在更改纵横比。对于我的用例，我确实需要调整大小并保留纵横比的方形框。谢谢。 如果您需要它们按照您的要求成为完美的正方形，请查看此链接codepen.io/girish/pen/NBZeKq， 这正是我想要的。非常感谢。你想重新发布你的答案，以便我可以选择它作为我的问题的正确解决方案吗？我不知道 UI 是否会让我选择子评论。 它确实帮了我很多忙！不幸的是，由于我的代表少于 15 个，因此我的赞成票没有显示，但它们已被记录。

以上是关于使用视口动态调整 3x3 方格的大小的主要内容，如果未能解决你的问题，请参考以下文章

Flexslider 视口高度在调整大小时无响应

根据内容大小动画和调整 div 动态高度

在不调整 cypress 视口大小的情况下捕获元素的屏幕截图

如何在不缩放其内容的情况下调整 opengl 视口大小

CSS背景图像，根据视口调整大小[重复]

jquery $(window).width() 和 $(window).height() 在未调整视口大小时返回不同的值