Здравствуйте.
Есть родительских блок. С помощью ползунков я могу менять его ширину и высоту. Как при этом сохранять пропорции квадрата у дочернего блока, не меняя разметку html и css? Помогите, пожалуйста, не могу самостоятельно решить эту задачу. Благодарю!
<style>
#parent {width: 300px; height: 300px; padding: 10px; border: 5px solid red;}
#children {width: 300px; height: 300px; background: green;}
</style>
<p>height: <input id="parent_range_H" type="range" min="10" max="300" value="300" step="1" name="parent_h" oninput="parentH()">
width: <input id="parent_range_W" type="range" min="10" max="300" value="300" step="1" name="parent_w" oninput="parentW()"></p>
<div id="parent"><div id="children"></div></div>
function parentH() {
parent_range = document.getElementById('parent_range_H');
parent = document.getElementById('parent');
parent.style.height = parent_range.value+'px';
parent.height= 'px';
}
function parentW() {
parent_range = document.getElementById('parent_range_W');
parent = document.getElementById('parent');
parent.style.width = parent_range.value+'px';
parent.width= 'px';
}