Как мы можем изменить размер дочернего элемента div, когда мы инициируем изменение родительского элемента div - PullRequest
Новая
       26

Как мы можем изменить размер дочернего элемента div, когда мы инициируем изменение родительского элемента div

0 голосов
/ 23 мая 2018

У меня всего 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>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Вы можете использовать опцию 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>

Подробнее о параметрах изменяемого размера здесь .

Надеюсь, это поможет!

0 голосов
/ 23 мая 2018

Просто установите для 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-пропорционально-blocks-with-css-and-javascript/

...