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

Question

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

我正在尝试增加高度，但我目前的解决方案只增加了空白 space，并没有显示更多的背景图像：

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

如何设置列表项的高度，使每行的背景图片都能完整显示？

（我假设我必须在容器上设置背景-CSS，而不是锚点？如何？）

Answer 1

通过使用 "line-height" 而不是 "height" 解决了它：

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

虽然这不允许换行较长的文本。

Answer 2

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

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

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

How to set an Ionic list item height with a background image

html

css

angularjs

ionic-framework

ionic