Aspect Ratio of Banner on resize

by Faisal Khan Janjua

HTML

<div class="image"></div>
<br>
<div class="imgHolder">
  <img src="https://dummyimage.com/600x200/000/fff" />
</div>
<br>
<div class="cntr">
  <div class="image2"></div>
<br>
<div class="imgHolder2">
  <img src="https://dummyimage.com/600x200/000/fff" />
</div>
</div>

CSS

*{
  margin: 0;
  padding: 0;
}
.image, .image2{
  width: 600px;
  height: 400px;
  background: url('https://dummyimage.com/600x200/000/fff') no-repeat center center;
  background-size:cover;
}
.imgHolder img, .imgHolder2 img{
  width:100%;
  height:100%;
}
.cntr{
  width:80%;
  height: 180px;
  margin:0 auto;
}

JavaScript

function aspectRatio(){
  /* let widthT = $(window).width();
  let heighT = widthT * 200 / 600; // height / width
  $('.image, .imgHolder').width(widthT).height(heighT); */
  let wWidth = window.innerWidth;
  let wHeight = window.innerHeight;
  let nHeight = wWidth * 200 / wWidth; // height / width
  document.querySelector('.image, .imgHolder').innerWidth = wWidth;
  document.querySelector('.image, .imgHolder').innerHeight = nHeight;
}
function aspectRatio2(){
  let widthT = $('.cntr').width();
  let heighT = widthT * 200 / 600; // height / width
  $('.image2, .imgHolder2').width(widthT).height(heighT);
}

$(document).ready(function(){
  aspectRatio();
  aspectRatio2();
});
$(window).resize(function(){
  aspectRatio();
  aspectRatio2();
});