рони,
приветствую вас!
Вот смотрите, если я делаю так:
<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>
<script>
parent = document.getElementById('parent');
children = document.getElementById('children');
function parentH() {
parent_range = document.getElementById('parent_range_H');
parent.style.height = parent_range.value+'px';
children.style.height = parent_range.value+'px';
children.style.width = parent_range.value+'px';
//parent.height= 'px';
}
function parentW() {
parent_range = document.getElementById('parent_range_W');
parent.style.width = parent_range.value+'px';
children.style.height = parent_range.value+'px';
children.style.width = parent_range.value+'px';
//parent.width= 'px';
}
</script>
то дочерний блок (квадрат), при любом изменении размеров родительского блока, всегда сохраняет свои пропорции. Как бы да, одну задачу мы решаем.
Но получаются глюки. А именно, если например мы сначала меняем высоту родительского элемента, то дочерний элемент сохраняет свои пропорции внутри родительского, что правильно. Но как только сразу после этого мы начинаем менять ширину родительского элемента, то дочерний элемент моментально оказывается за пределами своего родителя, а потом подстраивается в его размеры. То есть как бы на мгновение "выпрыгивает" из родителя. То же самое и наоборот: если сначала меняем ширину, а потом начинаем менять ширину, такое же поведение.
Вот как можно этого избежать? Помогите, пожалуйста, это уже, я так полагаю, сверх моих знаний))
И еще у меня такой вопрос: как можно здесь на сайте добавить воспроизводимый пример, чтобы при клике на кнопку "Посмотреть!" можно было его воспроизвести. Я вот html и css добавляю в теги html (кнопка - <>), а js в отдельном теге. В какой тег всё это завернуть, чтобы получился воспроизводимый пример? Что-то я не могу найти это в справке. Спасибо!