I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize event instead of just adjusting to the new height. How can I prevent the div from growing in this manner?
<div class="header-pc" style="background-image: url('assets/sunset-flipped1.png');background-size: 100% auto;height:1000px"></div>
function resizeHeaderPic(){
var height = $(window).height();
$('.header-pc').height(height);
}
$(document).ready(function(){
//resizeHeaderPic();
$(window).resize(function(){
resizeHeaderPic();
});
});