Set each parent .element to the size of its child img?

Set each parent .element to the size of its child img?

Hello,

I have a couple of parent DIVs, each of them containing an img. All images have diverse max-width/max-height values and each parent DIV should take the exact same size as its child img. Afterwards, the child IMGs should be set to 100% max-width/max-height.

So far, I have this, which doesn't work:

  1.   $("article.item").css({
  2.     'height':($(this).children("img").height()+'px'),
  3.     'width':($(this).children("img").width()+'px')
  4.   });
  5.   $("article.item").children("img").css({
  6.     'max-height':'100%',
  7.     'max-width':'100%'
  8.   });

I guess there might be a problem with the $(this) selector. If I replace $(this) with a selector like $("article.item:last"), the code seems to work, but all "article.item" take the size of the last one.

Can someone help me to get this code running for each "article.item" individually?

Thanks!