Instagram like gallery view using collection-repeat


I can get close with this code:

    <img class='item' 
         collection-repeat='photo in photos'
         ng-src='{{ photo.path }}'

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 as an example)

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


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