如何在离子中使用图像作为按钮 [英] How to use image as button in ionic

问题描述

我的目标是将图像用作离子按钮。我首先使用a-tag在页面之间进行链接。但是当我点击图像时。没有按钮激活效果。所以我切换到按钮标签

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

我尝试过使用

<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;"

和

style="line-height:100px;"

但似乎没什么用。

我也尝试添加自己的CSS

I also tried adding my own css

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

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

并将以下代码添加到我的index.html

and added below code into my index.html

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

以及我控制器的代码

$scope.class = "Test-up";

我尝试从 http://codepen.io/Leiron/pen/ztawA
但它不适用于ios或android。那我该怎么办？

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

推荐答案

试试这个。

 <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.

确保给出src字段的正确路径。

Make sure you give the correct path to src field.

这篇关于如何在离子中使用图像作为按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！