October 04, 2017
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); }