调整大小到一个容器中最大的正方形

Question

如何使用CSS调整DIV大小以成为其容器中最大的正方形？如果CSS不可能，那么如何使用JavaScript？

如果容器具有height > width，我希望正方形的大小到width x width。如果容器具有width > height，我希望广场的大小为height x height。

当容器的尺寸更改时，孩子的尺寸应相应调整。

我发现这个答案有助于维持孩子的长宽比。当孩子大于高度时，这种方法不起作用。

.flex {
  display: flex;
}
.wide,
.tall {
  flex: none;
  border: 3px solid red;
}
.wide {
  width: 150px;
  height: 100px;
}
.tall {
  width: 100px;
  height: 150px;
}
div.stretchy-wrapper {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background: blue;
}
div.stretchy-wrapper>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-size: 24px;
  text-align: center;
}

<div class="flex">
  <div class="wide">
    <div class="stretchy-wrapper">
      <div>Wide container</div>
    </div>
  </div>
  <div class="tall">
    <div class="stretchy-wrapper">
      <div>Tall container</div>
    </div>
  </div>
</div>

Answer 1

• 使用MAP（）获得所有.Stretchy-wrapper的宽度和高度。
• 现在使用for for for为iT分配最大值。
• 然后$（window）。每当浏览器窗口尺寸更改时，调用调用resizediv函数。

$(document).ready (function () {
  function resizeDiv () { 
    var stretchyWrapper = $(".stretchy-wrapper"),
      sWrapperWidth = stretchyWrapper.map (function () {
        return $(this).width ();
      }),
      sWrapperHeight = stretchyWrapper.map (function () {
        return $(this).height ();
      }),
      container = stretchyWrapper.map (function () {
        return $(this).parent ();
      });
    
    for (var i in container) {
      var maxVal = Math.max (sWrapperWidth[i], sWrapperHeight[i]);
      $(container[i]).css ({"width": maxVal, "height": maxVal});
    }
  }
  resizeDiv ();
  
  $(window).resize (function () {
    resizeDiv ();
  });
});

.flex {
  display: flex;
}
.wide,
.tall {
  flex: none;
  border: 3px solid red;
}
.wide {
  width: 150px;
  height: 100px;
}
.tall {
  width: 100px;
  height: 150px;
}
div.stretchy-wrapper {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  background: blue;
}
div.stretchy-wrapper>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  font-size: 24px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="wide">
    <div class="stretchy-wrapper">
      <div>Wide container</div>
    </div>
  </div>
  <div class="tall">
    <div class="stretchy-wrapper">
      <div>Tall container</div>
    </div>
  </div>
</div>