Регулировка высоты и ширины div и его содержимого

Question

Я пытаюсь настроить высоту и ширину родительского Div HTML без изменения стилей дочернего div. Есть ли возможность настроить размеры div?

Пример сценария: у меня есть дерево, которое я планирую использовать в качестве общего кода для создания нескольких деревьев. Один маленький один большой эт c. Таким образом, не изменяя листья дерева и стили стволов (дочерние элементы внутри родительского элемента div), есть ли у нас возможность изменить размеры родительского элемента div, чтобы дочерние элементы div были соответственно соответствующим образом скорректированы?

Моя скрипка здесь

<div class="tree" style="position:absolute;left:20px;right:20px;
height:200px;width:200px;

">


    <div id="leaf1" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:40px;top:80px;"></div>
    <div id="leaf2" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:100px;top:85px;"></div>
    <div id="leaf3" style="height:90px;width:90px;background-color:green;border-radius:60px;position:absolute;left:80px;top:40px;"></div>
    <div id="stem" style="height: 150px;width: 30px;background-color: brown;position: absolute;left: 100px;top: 100px; z-index:-1;"></div>


</div>

Answer 1

построить это, используя только фон вместо внутренних элементов и полагаться на процентные значения:

.tree {
  border:1px solid;
  width:100px;
  display:inline-block;
  background:
    radial-gradient(circle at 36% 51%,green 22%,transparent 23%),
    radial-gradient(circle at 52% 37%,green 22%,transparent 23%),
    radial-gradient(circle at 64% 52%,green 22%,transparent 23%),
    linear-gradient(brown,brown) bottom/15% 50%;
  background-repeat:no-repeat;
}
.tree:before {
  content:"";
  display:block;
  padding-top:150%;
}

<div class="tree"></div>
<div class="tree" style="width:200px;"></div>
<div class="tree" style="width:250px;"></div>
<div class="tree" style="width:50px;"></div>

Answer 2

Я не уверен, почему вы не можете сделать это:

Также держите код css отдельно, им легко управлять, я изменил для вас.

<style>
.tree {
  border: 1px solid black;
  position: relative;
  left: 20px;
  right: 20px;
  height: 300px; /* you can do it here */
  width: 300px;  /* you can do it here */
}

#leaf1 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 40px;
  top: 80px;
}

#leaf2 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 100px;
  top: 85px;
}

#leaf3 {
  height: 90px;
  width: 90px;
  background-color: green;
  border-radius: 60px;
  position: absolute;
  left: 80px;
  top: 40px;
}

#stem {
  height: 150px;
  width: 30px;
  background-color: brown;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: -1;
}
</style>

<div class="tree">Parent Div
  <div id="leaf1"></div>
  <div id="leaf2"></div>
  <div id="leaf3"></div>
  <div id="stem"></div>
</div>