angualr js - 오버플로에 도달하면 이미지 표시 중지

Question

mvc 파일 결과 및 각도 ng-src를 통해 페이지로 im (다른 곳에서 호스팅하는 외부 소스에서) 이미지를 제공합니다.

예 : 나는 img.path 항상 외부 C#의 MVC에 가서 내용에 파일 스트림을 반환하는 것을 알고이 경우

<div ng=repeat="img in Images"> 
     <img ng-src={{img.path}} style="height:100px;width:auto" /> 
</div>` 

.

화면에 이미지의 특정 '합계'너비 만 맞추기를 원합니다. 따라서 부모 div에서 "오버플로 : 숨김"을 사용하는 것과 같은 이미지가 절반 밖에 표시되지 않습니다.

다음 이미지가 오버플로되어 오버 플로우가 발생하지 않을 때까지 ng-repeat를 계속 설정할 수있는 방법이 있습니까? 이미지의 크기가 조정되어 높이가 모두 100 픽셀로 설정되고 너비가이 크기에 맞게 비율이 조정됩니다. 에 대한 이미지 위치를 테스트

App.directive('styleParent', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elem, attr) { 
      elem.on('load', function() { 
       var w = $(this).width(), 
        h = $(this).height(); 

       var xPos = angular.element(this).prop('offsetLeft'); 
       xPos += w; 

       var div = elem.parent(); 
       var d_width = div.width(); 
       var d_xPos = angular.element(div).prop('offsetLeft'); 
       d_xPos += d_width; 

       console.log([xPos, d_xPos, this]) 
       if (xPos > d_xPos) { 
        angular.element(this).hide(); 
       } 


      }); 
     } 
    }; 
}); 

Answer 1

대답은 둥지에 다른 사업부 내부 이미지였다 ..`

나는 아래 지시어는 트릭을 할 것이라고 생각하지만, 어떤 이유로 이미지 크기를 조정하는 것 원래 div는 이전과 마찬가지로 이미지 parent div로 이미지 자체를 숨 깁니다.