Wakeme UpNow Wakeme UpNow - 6 months ago 481
AngularJS Question

How to use image as button in ionic

My objective is to use image as a button in ionic. I first used a-tag to link between page. But when I clicked on the image. There is no button activated effect. So I switch to button-tag

I have tried using

<button class="button button-clear" style="background-image:url('img/myImage.jpg'); background-size:cover"></button>


But the button height stay the same. So it won't show full size image.
I have tried

style="font-size:100px;"


and

style="line-height:100px;"


But nothing seems to work.

I also tried adding my own css

.Test-up {
border :none;
padding : 0px;
}

.Test-down {
opacity: 0.5;
border:0px;
padding: 0px;
}


and added below code into my index.html

<button ng-mousedown="class='Test-down'" ng-mouseup="class='Test-up'" class="{{class}}" href="#">


and below code to my controller

$scope.class = "Test-up";


as I tried from http://codepen.io/Leiron/pen/ztawA
But it doesn't work with ios or android. So what should I do?

Answer

try this.

 <img src="img/myImage.jpg" style="width : 100% ; height : 100%" ng-click="nextpage()" >

this shoud to the trick you can have the height and width as your wish.

Make sure you give the correct path to src field.

Comments