CODEWITHSUNDEEP
javascriptjquerycss
Bohdan
Bohdan

Reputation: 31

Image resize within the div on manual browser width change

thanks to some external resources and help of some great people the following codepen.io image(post) grid with zoom in effect on hoover was created. There is only one small feature that actually I can't figure out is if for example the user will decide to resize his browser width the images will behaive very very badly, this JS code in some kind destroy responsive behavior of images, but if you refresh the page everything will look nice again.

JS CODE

$(function(){
  $('.item-inner').each(function(){
    var img = $(this).find('img');
    $(this).css({height:img.height(), width:img.width()});
  })
})

Upvotes: 0

Views: 53

Answers (1)

Guilherme Oliveira
Guilherme Oliveira

Reputation: 2369

This code should be put inside a resize() event and also on ready()

function updateImageSize(){ 
  $('.item-inner').each(function(){
    var img = $(this).find('img');
    $(this).css({height:img.height(), width:img.width()});
  })
}
$(window).on('resize',updateImageSize);

Upvotes: 1

Related Questions