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 中使用“溢出：隐藏”。

有没有办法可以设置 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();
                }


            });
        }
    };
});
4

1 回答 1

0

答案是将图像嵌套在另一个 div 中，像之前一样针对原始 div 测试图像位置，然后隐藏图像父 div 而不是图像本身。

于 2016-07-21T14:42:03.203 回答