<div class="width-chooser">
Change the size of parent <br />
<input type="range" min="0" max="1000" id="input-width" />
</div>
<div id="parent">
<span class="child"></span>
</div>
#parent {
background: tomato;
width: 600px;
height: auto;
}
.child {
background: greenyellow;
width: 10px;
height: 0;
padding-top: 100%;
display: block;
}
.width-chooser {
text-align: center;
}
* {
box-sizing: border-box;
}
var parent = document.getElementById('parent');
document.getElementById('input-width').addEventListener('change', function() {
parent.style.width=`${this.value}px`;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.