Question

我正在使用网络应用，我必须使用不同大小的图像。我必须以适当的宽高比显示图像。

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

图像宽高比维护无法正常工作

1 个答案: