<!DOCTYPE html>
<html ng-app="app-images">

  <head>
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://code.angularjs.org/1.3.7/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
      This is the dream!
            <div class="container">
        <img src="http://fakeimg.pl/250x100/" class="wide" />
      </div>
      <div class="container">
        <img src="http://fakeimg.pl/350x200/" class="wide" />
      </div>
      <div class="container">
        <img src="http://fakeimg.pl/250x500/" class="tall" />
      </div>
      <div class="container">
        <img src="http://fakeimg.pl/150x600/" class="tall" />
      </div>
    </div>
    <hr />
    <div>
      <div class="details">
        <p ng-repeat="imageMeta in images">
          Hi: {{imageMeta}} W: {{imageMeta.width}} H: {{imageMeta.height}}
        </p>
      </div>
      <div class="container" ng-repeat="imageMeta in images">
        <img 
            ng-src="{{imageMeta.src}}" 
            title="{{imageMeta.width}}-{{imageMeta.height}}"
            image-set-aspect 
            ng-class="{'wide': imageMeta.width/imageMeta.height > 1, 'tall': $parent.imageMeta.width/$parent.imageMeta.height <= 1}" />
      </div>
        ... ops!
    </div>
  </body>

</html>

'use strict';

var app = angular.module('app-images', []);

app.controller('MainCtrl', function($scope) {
  $scope.images =
  [
    {src: "http://fakeimg.pl/250x100/"},
    {src: "http://fakeimg.pl/350x200/"},
    {src: "http://fakeimg.pl/250x500/"},
    {src: "http://fakeimg.pl/150x600/"}
  ];
});

app.directive('imageSetAspect', function() {
    return {
        scope: true,
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                // Use jquery on 'element' to grab image and get dimensions.
                scope.$apply(function() {
                  scope.imageMeta.width = $(element).width(); 
                  scope.imageMeta.height = $(element).height(); 
                });
            });

        }
    };
});
/* Styles go here */

.container {
  width: 100px;
  height: 100px;
  margin: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.details {
  position: absolute;
  left: 200px;
}

.wide {
  max-height: 100%;
  height: auto;
}

.tall {
  max-width: 100%;
  width: auto;
}