0

mvc fileresultを介してページに（他の場所でホストしている外部ソースから）、角度のあるng-srcに提供する画像がたくさんあります。

例えば。

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

この場合、img.path は常に外部の c# mvc に行き、ファイルストリームをコンテンツに返すことがわかっています。

親divで「overflow:hidden」を使用した場合のように、画像の半分が表示されないように、特定の「合計」幅の画像のみを画面に収めたいと考えています。

次の画像がオーバーフローするまで継続するように ng-repeat を設定する方法はありますか (したがって、オーバーフローを完全に防止します)。画像は、高さがすべて 100px に設定されるようにサイズ変更され、幅はこのサイズに合わせて比例してスケーリングされます。`

以下のディレクティブでうまくいくと思いましたが、何らかの理由で画像のサイズを変更しているようです..

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();
                }


            });
        }
    };
});
4

1 に答える 1

0

答えは、画像を別の div 内にネストし、以前のように元の div に対して画像の位置をテストしてから、画像自体ではなく画像の親 div を非表示にすることでした。

于 2016-07-21T14:42:03.203 に答える