Question

我正在尝试使用angular ...

生成下面显示的网格视图

这是我的HTML

<md-content layout-padding>
        <md-grid-list
                md-cols-gt-md="3" md-cols-sm="2" md-cols-md="3" md-cols-xs="1"
                md-row-height-gt-sm="1:1" md-row-height="4:3"
                md-gutter-gt-md="16px" md-gutter-gt-sm="8px" md-gutter="4px">
            <md-grid-tile
                    ng-repeat="tile in sc.grid track by $index"
                    ng-style="{
        'border': '1px solid grey'
      }"
                    md-colspan-gt-sm="{{tile.colspan}}"
                    md-rowspan-gt-sm="{{tile.rowspan}}">
                    <img proxy="{{sc.panelInfo[$index].img}}"/>
                    <md-grid-tile-footer><h3>{{sc.panelInfo[$index].title}}</h3></md-grid-tile-footer>

            </md-grid-tile>
        </md-grid-list>
    </md-content>

控制器代码：

        self.grid = (function() {
        var tiles = [];
        var colspan = [2,1,1,1,3];
        var rowspan = [1,2,1,1,1];
        var width = [600,300,300,300,940];
        var height = [275,600,275,275,275];
        for (var i = 0; i < 5; i++) {
            tiles.push({
                colspan: colspan[i],
                rowspan: rowspan[i],
                width: width[i],
                height:height[i]
            });
        }
        return tiles;
    })();

我能够显示图像但是它们都显示为方形图像并且即使尺寸不同也会重叠。第一个图块中的图像显示为600x 600，即使它只有600 x 275.第二个图块被截断并显示为300x 300而不是300 x 600.请帮忙。谢谢！

Answer 1

没关系。我想到了。导致问题的是图像代理。将其更改为图像src，它可以工作！

使用角度材质网格列表时显示图像大小的问题

1 个答案: