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

Question

In Ionic, I am trying to show a list of items, each with a background image.

I am trying to increase the height, but my current solution only increases the blank space, and does not show more of the background image:

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

How can I set the list item height in a way that the background image for each row is fully shown?

(I assume I would have to set the background-CSS on the container, not the anchor? How?)

Solution 1

Solved it by using "line-height" instead of "height":

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

Although this does not allow for wrapping longer text.

Solution 2

Line height will be dependent on the text. You can add min-height, It should work too :

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