Question

感谢您抽出宝贵的时间来了解我的困境。

我想做的是用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)));
}

Answer 1

请根据您对完美正方形的要求查看以下工作片段，希望能有所帮助：）

* {
  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>

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

1 个答案: