Question

我有一堆图像，通过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();
                }


            });
        }
    };
});

Answer 1

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

angular js - 一旦达到溢出就停止显示图像

1 个答案: