title: Image aspect ratio maintainence not working properly
body: <p>I am working on the web app, in which i have to use images of different size. I have to show image in appropriate aspect ratio.</p>
  
  <p>My ImageWrapper is of <strong>dimention 500x500</strong>.
  I am using a directive to maintain aspect ratio.</p>
  
  <p>This is <strong>hml file</strong> </p>
  
  <pre><code> &lt;div class="image-aspect-wrapper-list "&gt;
      &lt;img src="/OctoberImageHolder/container/2/small/1.jpeg"  alt="..." onError="" image-resize &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is <strong>css file</strong></p>
  
  <pre><code>.image-aspect-wrapper-list { 
     width: 250px; 
     height: 250px;  
     text-align: center; 
     line-height: 250px; margin: 0 auto; 
  } 
  .image-aspect-wrapper-list img {
   vertical-align: middle; 
  }
  </code></pre>
  
  <p>this is the <strong>directive</strong> </p>
  
  <pre><code>MyApp.directive('imageResize', function($window, $rootScope) {
      return {
          restrict: 'EA',
          scope: {},
          link: function(scope, elem, attrs) {
              elem.on('load', function(){
                if($(this).width() &gt;= $(this).height()){  
                    $(this).css({'width':$(this).parent().width(),'height':'auto'});
  
                }else{
                 $(this).css({'height':$(this).parent().height(),'width':'auto'});
                }
  
              });
          }
      };
  });
  </code></pre>
  
  <p>This is working fine but it takes some time to load the directive and upto that time image getting of maximum size.
  how to tackle this issue.</p>
  
  <p>Some time it's not working properly.</p>