如何使用背景图像设置离子列表项高度

Question

在Ionic中，我试图显示一个项目列表，每个项目都有一个背景图像。

我正在尝试增加高度，但我当前的解决方案只会增加空白区域，并且不会显示更多的背景图像：

<ion-content>
    <ion-list>
        <ion-item back-img="{{post.image.url}}" ui-sref="app.post({id:post.ID})" ng-repeat="post in data.posts" ng-style="{'height': '250px'}" >
            {{post.title}}
        </ion-item>
    </ion-list>
</ion-content>

.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        var content = element.find('a');
        content.css({
            'background': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };

如何以完全显示每行背景图像的方式设置列表项高度？

（我假设我必须在容器上设置background-CSS，而不是锚点？怎么样？）

Answer 1

使用＆＃34; line-height＆＃34;解决它而不是＆＃34;身高＆＃34;：

ng-style="{'line-height': '250px'}"

虽然这不允许换长文本。

Answer 2

行高将取决于文本。 你可以添加最小高度，它也应该工作：

ng-style="{'min-height':'250px'}"