Set div Height Equal to div Width

Using tiled image layouts in responsive design can sometimes be tricky to set the height, especially if you want all of the image containers to consistently remain the same height.

Take a look at the example below where jQuery is used to resize a tile image layout for a staff page.

Original:

Sourced here.

var divWidth = $('.main').width(); 

$(window).resize(function(){
    $('.main').height(divWidth);
});

I found that this code did not work well scaling the image heights automatically on window resize. Instead, I had to refresh the window for this to function properly. It could have been the way I placed the code, but I applied a different approach, read on…

Modified:

jQuery(document).ready(function($) {

	REL.init();
});


var REL = {};


REL.init = function() {

	jQuery(window).on('resize',function(){
		REL.adjustPeople();
	});

}


REL.adjustPeople = function() {
	
	var divWidth = jQuery('.our_people').width(); 
	jQuery('.our_people').height(divWidth);

}

 

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.