aarka,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html,body{
height: 100%;
}
.slider{
width: 70%;
background-color: #0000FF;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var divs = document.querySelectorAll(".slider"), timer, pause = 50;
function resizeDivs() {
[].forEach.call(divs, function(el) {
var width = el.offsetWidth * .75;
el.style.height = width + "px";
});
}
resizeDivs();
window.addEventListener("resize", function() {
window.clearTimeout(timer);
timer = window.setTimeout(resizeDivs, pause);
});
});
</script>
</head>
<body>
<div class="slider"></div>
</body>
</html>
