Question

这里我试图使div的宽度与其高度的尺寸完全相同，以便它保持完美的正方形。高度是它的父div的百分比，因此它的高度没有确切的像素值。

如果我不知道像素的确切高度，我怎样才能使div成为正方形？

我在下面给出了一个链接，以证明我在说什么。在示例中，我希望青色彩色div能够动态地变换它的宽度，以匹配它的高度尺寸，使其保持完美的正方形。我希望能够在CSS代码中执行此操作，但如果没有，则可以。

CSS：

#parent{
  height: 70px;
  width: 450px;
  background: #999;
  resize: both;
  overflow: auto;
}
#perfect_square{
  height: 78%;
  width: 80px;
  background: cyan;
}

Answer 1

以下是仅限CSS 解决方案：

#parent {
  width:350px;
  height:200px;
  background:silver; 
}

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#container:after {
    content: '';
    display: block;
    margin-top: 100%;
}
#perfect_square {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: cyan;
}

<div id="parent">
  <div id="container">
      <div id="dummy"></div>
      <div id="perfect_square">
      </div>
  </div>
</div>

另一个仅限CSS 解决方案：

.parent {
  width:600px;
  height:500px;
  background:silver;
}

.perfect_square {
    width: 20%;
    height: 0;
    padding-bottom: 20%;
    background:cyan;
}

<div class="parent">
  <div class="perfect_square"></div>
</div>

希望有所帮助！

Answer 2

您需要使用JavaScript。

var square = document.getElementById('perfect_square');
square.style.width = square.offsetHeight + "px";

删除CSS文件中的perfect_square width属性，并使用上面的代码动态设置其宽度。在JSFiddle上试试。

Answer 3

使用javascript你可以设置一个每隔x秒检查一次的间隔来改变宽度，我设置间隔每100ms检查一次。

interval = setInterval(function(){
    var square = document.getElementById('perfect_square');
    square.style.width = square.offsetHeight + "px";
},100);

动态强制div的宽度等于其高度

3 个答案: