I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and remains at the minimum pixel height defined in the CSS:
JQuery Code:
function adjustHeight() {
$('.resizable').each(function(index, element) {
var width = $(this).width();
var height = width / 1.6 + 'px';
$(this).css('height', height);
});
}
$(window).on('load resize', function() {
adjustHeight();
});
CSS Styles:
.image-background-holder {
width: 100%;
height: auto;
min-height: 20px;
position: relative;
}
HTML Elements:
<div class="image-background-holder resizable" id="box-1"></div>
<div class="image-background-holder resizable" id="box-2"></div>