Comment définir un Ionique de l'élément de liste de la hauteur avec une image de fond
Ionique, j'essaie d'afficher une liste d'éléments, chacun d'eux avec une image de fond.
Je suis en train d'essayer d'augmenter la hauteur, mais ma solution actuelle ne fait qu'augmenter l'espace vide, et ne montre pas plus de l'image d'arrière-plan:
<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'
});
};
Comment puis-je régler l'élément de liste hauteur, de manière que l'image d'arrière-plan pour chaque ligne est entièrement affichée?
(Je suppose que je dois régler, en arrière-plan CSS sur le contenant, pas le point d'ancrage? Comment?)
background-size: contain;
l'image pour la rendre toujours aller à l'intérieur. mais cela pourrait/ habituellement fais étire l'image de tous sur la place.Hmm,
contain
petites écailles et répète la même image plusieurs fois de gauche à droite, mais conserve la (mauvaise) de hauteur.Yh contiennent est probablement pas ce que vous voulez.
OriginalL'auteur thomers | 2015-02-25
Vous devez vous connecter pour publier un commentaire.
Résolu en utilisant la fonction "line-height" au lieu de "hauteur":
Bien que cela ne permet pas pour l'emballage de plus de texte.
.item-text-wrap
comme iciOriginalL'auteur thomers
Hauteur de la ligne dépend de la texte.
Vous pouvez ajouter un min-height, Il devrait travailler trop :
OriginalL'auteur Aniruddh