javascript - Div Square，宽度尺寸基于100%高度

Question

我正在尝试制作一个宽度大小基于元素的 (100%) 高度的响应式正方形。我认为仅使用 CSS 是不可能的。

方形宽度应等于高度(大容器的 100%。大容器超过屏幕的 100%)。比例必须是 width=height 以保持正方形。

Answer 1

您可以使用一个很小的内联图像来做到这一点。没有 JS，没有额外的文件。

.container {
  height: 150px;
  width: 100%;
  text-align: center;
  background: #acd;
}
    	
.square {
  display: inline-block;
  height: 100%;
  background: #691;
}

<div class="container">
  <div class="square">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" height="100%">
  </div>
</div>