javascript - 图像纵横比保持不正常

Question

我正在开发 Web 应用程序，我必须在其中使用不同大小的图像。我必须以适当的宽高比显示图像。

我的 ImageWrapper 是维度 500x500。我正在使用指令来保持纵横比。

这是html文件

 <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/