当我们触发父调整大小 div 时，我们如何调整子 div 的大小

Question

我总共有 3 个 div，一个是父 div，其中 div 有 2 个子 div，现在我想做什么，如果我调整了父级 div 我也想调整它的子级 div。谁能帮我，我们该怎么做？在这里我添加了我的代码

$(".main_div").resizable();
     $(".child_div1").resizable();
     $(".child_div2").resizable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
  <div class="main_div" style="width:500px;height: 500px;border: 2px solid grey;">
     <div class="child_div1" style="width:300px;height: 100px;border: 2px solid black;"></div>
     <div class="child_div2" style="width:400px;height: 100px;border: 2px solid red;"></div>
 </div>

Answer 1

只需将 max-width 和 max-height 设置为 100% 或任何您希望子 div 相对于父 div 的大小比例。

$(".main_div").resizable();
$(".child_div1").resizable();
$(".child_div2").resizable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="main_div" style="overflow:hidden;max-width:100%; max-height:100%; width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;max-width:100%; max-height:100%; height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;max-width:100%; max-height:100%; height: 100px;border: 2px solid red;"></div>
</div>

您还应该看看：https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Answer 2

您可以使用 alsoResize 选项指定嵌套元素在调整父级大小时调整大小：

$(".main_div").resizable({
  alsoResize: '.child_div1, .child_div2'
});
$(".child_div1").resizable({
  containment: "parent"
});
$(".child_div2").resizable({
  containment: "parent"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  
<div class="main_div" style="width:500px;height: 500px;border: 2px solid grey;">
  <div class="child_div1" style="width:300px;height: 100px;border: 2px solid black;"></div>
  <div class="child_div2" style="width:400px;height: 100px;border: 2px solid red;"></div>
</div>

有关可调整大小选项的更多信息here。

希望对您有所帮助！

当我们触发父调整大小 div 时，我们如何调整子 div 的大小

How can we resize child div when we trigger parent resize div

javascript

jquery

jquery-ui

jquery-ui-resizable