你可以用一个很小的内联图像来完成这个任务。没有JS，没有额外的文件。
第一个

对于仅限CSS的解决方案（相对于屏幕大小调整大小），请使用视口单位。例如：

@media screen and (orientation:landscape) {
    .box{
        height: 100vh;
        width: 100vh;
    }
}
@media screen and (orientation:portrait) {
    .box{
        height: 100vw;
        width: 100vw;
    }
}

(You可能希望将其减少到98个单位以消除滚动）
非常适合需要占据屏幕空间精确比例的divs。
JSFiddle here.

看一看... aspect-ratio属性。
这个属性使得基于高度创建一个正方形div成为可能，这是最简单的方法。下面是一些示例代码：
第一个
以下几个链接可帮助您了解aspect-ratio属性：

• https://css-tricks.com/almanac/properties/a/aspect-ratio/
• https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
• https://support.squarespace.com/hc/en-us/articles/115008538927

由于正方形的宽度和高度相同，并且您知道正方形的宽度，因此可以将相同的值应用于高度。
如果你能使用JS，那么请尝试一下：（jQuery）中的数据类型

var wiDth = $('div').css('width'); // get width
$('div').css('height', wiDth); // apply that value to the height

请在此处尝试：http://jsfiddle.net/afzaal_ahmad_zeeshan/vpGUK/

你可以使用javascript来完成这个任务。我假设你有一个更大的div容器，你想在其中放置一个正方形，它的高度与容器的高度相同。html如下所示：

<div id="container">
  <div id="square" style="height:100%;">

  </div>
</div>

在javascript中，您只需执行以下操作：

<script>
  var container = document.getElementById("container");
  var square = document.getElementById("square");

  square.style.width = container.style.height;

  window.onresize=function(){
    square.style.width = container.style.height;
  };
<script>

希望能有所帮助

我认为这对你来说是一个很好的“只使用CSS”的解决方案。跨浏览器工作。
http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares
很好地强调了这条不错的css规则：
如果垂直填充（和边距）是以百分比（%）值指定的，则大小是包含元素宽度的百分比。

把它放到<script src="http://code.jquery.com/jquery-1.10.2.js"></script>上，然后用jquery试试：

var totalHeight = 0;
$("#yourContainer").children().each(function(){ 
    totalHeight += $(this).height;  
});
$("#yourContainer").css('width', totalHeight + 'px');

好了解决办法在这里。

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

您可以像这样为容器指定宽度和高度

.container {
    width: 100vh;
    height: 100vh;
}

它将创建一个高度为100%且宽度=高度的正方形div。