Question

我的页面上有一个矩形区域，需要在中间填充一个正方形。此矩形可以是水平的也可以是垂直的。这意味着，仅基于容纳盒的宽度来制作正方形的大量现有问题都不起作用。 ^{[1] [2]}

此正方形也可以动态更改，并且此方法不会调整正方形的大小。如果可能的话，我也不想使用JavaScript或JQuery。这是我唯一要使用JQuery的东西。

在下面，您可以看到代码在开始时应该执行的操作，但是当您调整框的大小时，并不会调整正方形的大小。

git fetch origin --prune

/* 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;
}

要完全清楚：

上面的第一个示例根本不调整灰色正方形的大小。
第二个示例将灰色正方形调整为矩形边界的大小。（我想要的）

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

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

我更愿意在纯CSS 中完成所有操作。

Answer 1

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

Answer 2

您可以看一下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/ -->

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

2 个答案: