Search code examples
angularjsimageconditional-statementsaspect-rationg-class

Angular ng-class depending on image aspect

How can I set a ng-class (inside ng-repeat) depending on image aspect ratio?

something like...

<div ng-repeat="img in images" style="width: 100px; height: 100px;">
   <img ng-src="{{img}}" ng-class="{'wide': img.width/img.height > 1, 'tall': img.width/img.height <= 1}" />
</div>

EDIT: CSS object-fit doesn't work for me because of IE... :(

Solution

  • After many times serching for it, I found a simple and sexy answer... It is a CSS img element property called object-fit. It could have these values: fill, contain, cover, scale, none.

    img {
  object-fit: cover;
}