Instagram like gallery view using collection-repeat

1

I can get close with this code:

    <img class='item' 
         collection-repeat='photo in photos'
         item-width='125px'
         item-height='125px'
         ng-click='show(photo.id)'
         ng-src='{{ photo.path }}'
         width='100%'>

The grid is consistent with this, but the images are larger than 125px and have different dimensions than a 1x1 width/height. As a result, the images are distorted.

In instagram, the images are not distorted, but they fit the full width and height (see http://cloud.addictivetips.com/wp-content/uploads/2012/12/Instagram-iOS-Infinite-Grid.jpg as an example)

I’m searching and searching, but I’m a stuck right now. How do you do this?

2

On instagram all the images have the same dimensions, so it’s easier to handle dimensons

I’m developing a Ionic gallery directive. Have a look, not sure if helpful or not but it’s definitely a interesting problem to handle