将 div 调整为容器中最大可能的正方形 [重复]

Posted 2023-03-06

【中文标题】将 div 调整为容器中最大可能的正方形 [重复]

【英文标题】：Resize a div to largest possible square in container [duplicate]

【发布时间】：2017-07-12 22:27:11

【问题描述】：

如何使用 CSS 将 div 调整为容器内最大的正方形？如果用 CSS 做不到，那么用 javascript 怎么办？

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

当容器的尺寸发生变化时，孩子的尺寸应相应调整。

我发现this answer 有助于保持孩子的纵横比。当容器的宽度大于高度时，这种方法不起作用，因为子溢出父容器，如下面的 sn-p 所示。

.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>

【问题讨论】：

您可以在 CSS (developer.mozilla.org/en-US/docs/Web/CSS/calc) 中进行尺寸计算，但是您将无法检测到元素的尺寸变化，您需要 JS，因为您基本上是在询问条件在事情发生之前就被满足，而 CSS 没有那种逻辑。

你希望哪个 div 是正方形的？您当前的示例有什么问题？

我希望 .stretchy-wrapper 的 div 后代（蓝色框）是方形的，就是这样。在示例中，宽容器中的蓝色框溢出了您可以通过边框看到的父项。

您可能可以使用vmin jsfiddle.net/mkfLjmgz 但不确定您的真实情况。

通过提供真实案例，我们或许能够建议一个合适的基于 CSS 的解决方案

【参考方案1】：

使用 map() 获取所有 .stretchy-wrapper 及其父级的宽度和高度。 现在使用 for 循环为其父级分配最大值。 然后，只要浏览器窗口大小发生变化，$(window).resize 就会调用 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>