Поддержка пропорций изображения не работает должным образом

Question

Я работаю над веб-приложением, в котором я должен использовать образы разного размера. Я должен показать изображение в соответствующем соотношении сторон.

My ImageWrapper от размер 500x500. Я использую директиву для поддержания соотношения сторон.

Это HML файл

<div class="image-aspect-wrapper-list "> 
    <img src="/OctoberImageHolder/container/2/small/1.jpeg" alt="..." onError="" image-resize > 
</div> 

это файл CSS

.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; 
} 

это директива

MyApp.directive('imageResize', function($window, $rootScope) { 
    return { 
     restrict: 'EA', 
     scope: {}, 
     link: function(scope, elem, attrs) { 
      elem.on('load', function(){ 
       if($(this).width() >= $(this).height()){ 
        $(this).css({'width':$(this).parent().width(),'height':'auto'}); 

       }else{ 
       $(this).css({'height':$(this).parent().height(),'width':'auto'}); 
       } 

      }); 
     } 
    }; 
}); 

Это работает отлично, но требуется некоторое время, чтобы загрузить директиву и до того момента, когда изображение достигнет максимального размера. как решить эту проблему.

Некоторое время он не работает должным образом.

Answer 1

Вы можете использовать

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

https://jsfiddle.net/Lbe251qw/