创建绑定到可调整大小的矩形包含框的正方形

Question

我的页面上有一个矩形区域，需要在中心填充一个正方形。这个矩形既可以是水平的，也可以是垂直的。这意味着基于仅从包含框的宽度制作正方形的大量现有问题不起作用。 ^[1][2]

这个方块也可以动态改变，这种方法不会调整方块的大小。如果可能的话，我也不想使用 JavaScript 或 JQuery。这是我唯一会使用 JQuery 的事情。

您可以在下面看到代码在开始时应该做什么，但是当您调整框的大小时，它不会调整正方形的大小。

/* based on https://stackoverflow.com/a/5445536*/
$('.body').resizable();
var containingBlock = $('.box-rect');
var cmin = Math.min(containingBlock.width(), containingBlock.height());

$('#box-square').css({
  'height': cmin+'px',
  'width': cmin+'px'
});

.body{
  width: 200px;
  height: 100px;
}

.box-rect {
  width: 100%;
  height: 100%;
  min-width: 50px;
  min-height: 50px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* example bounding box */
  border: 1px solid gray;
}

.box-square {
  width: 50px; /* min(box-rect.height, box-rect.width) */
  height: 50px; /* box-rect min */
}

/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
  position: relative;
  height: 100%;
  width: 100%;
}

.box-reset:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.box {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* example gray box */
  height: 100%;
  background-color: gray;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
  <div class="box-rect">
    <div class="box-square">
      <div class="box-reset">
        <div class="box">
          Not working at all
        </div>
      </div>
    </div>
  </div>
</div>
<br />
<div class='body'>
  <div class="box-rect">
    <div class="box-square" id="box-square">
      <div class="box-reset">
        <div class="box">
          Fills to the bounds of the rectangle on load.
        </div>
      </div>
    </div>
  </div>
</div>

完全清楚：

• 上面的第一个示例根本没有调整灰色方块的大小。

• 第二个示例将灰色正方形的大小调整为矩形的边界。 （我想要的）

  但是，在调整包含块的大小时，它不会将灰色正方形的大小调整到矩形的边界。

我想将正方形调整为矩形的边界。就像在第二个示例中一样，当我调整包含块的大小时。

我更愿意在纯 CSS 中完成这一切。

Answer 1

您可以查看 jQuery example。最好了解它是如何工作的。 我在jsfiddle上做了一个类似的例子。

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
  }
  #resizable { 
    display:flex;
    justify-content:center;
    align-items:center;
    width: 150px; 
    height: 150px; 
    min-width:100px;
    min-height:100px;
  }

  #resizable h3 {
    display:flex;
    justify-content:center;
    align-items:center;
    height: 100px;
    width: 100px;
    text-align:center;
  }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
</head>
<body>
<div id="resizable" class="ui-widget-content center-center">
  <h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

<!-- Reference link https://jqueryui.com/resizable/ -->

Answer 2

删除了从 js 应用并添加的静态高度和宽度 width: 50%; 和 height: 50%; 到 .box-square

$('.box-rect').resizable();

.body{
  width: 400px;
  height: 200px;
}

.box-rect {
  width: 100%;
  height: 100%;
  min-width: 100px;
  min-height: 100px;
 
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* example bounding box */
  border: 1px solid gray;
}

.box-square {
    width: 100px;
    height: 100px;
 /* width: 100px;  min(box-rect.height, box-rect.width) */
 /* height: 100px;  box-rect min */
}

/*
The following is using a mix between the following two answers:
https://stackoverflow.com/a/6615994
https://stackoverflow.com/a/20117454
*/
.box-reset {
  position: relative;
  height: 100%;
  width: 100%;
}


.box {
    height: 100%;
    background-color: gray;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='body'>
  <div class="box-rect">
    <div class="box-square">
      <div class="box-reset">
        <div class="box">
        </div>
      </div>
    </div>
  </div>
</div>