Round image get cut-off

ionic-v1
1

I created a ionic project:

ionic start test blank

And add a button:

<button class="button button-clear" ng-click="">
  <img style="width:50%"  class="round-button" src="img/button.png" alt="">
</button>

The image is:

image

It’s working fine in browser and Android phone. But in ios simulator. it looks like this:

image
image746×640 40.6 KB

P.S.: If I change the image to rectangle image, it will be fine.

Any idea? Thanks.

2

Nobody encountered the same issue?

3

Did you tried giving it a height:auto ?

4

Yes. I tried. But it didn’t help. It only happened for image button and for ios simulator only. Have a look at my code:

    <div style="text-align:center;">          
      <img style="width:200px;height:auto;" src="img/round.png" alt="">
    </div>
    <div style="text-align:center;">
      <button class="button button-clear">
        <img style="width:200px;height:200px;" src="img/round.png">
      </button>          
    </div>

Result:

image

5

Don’t know if it’s bug or not. I modified my code:

    <div style="text-align:center;">
      <img ng-click="onClick()" style="width:200px;height:auto;cursor: pointer; " src="img/round.png" alt="">
    </div>
    <div style="text-align:center;">
      <button style="width:120px;height:120px;line-height:120px;" class="button button-clear">
        <img style="width:120px;height:120px;line-height:120px;" src="img/box.png">
      </button>          
    </div>
    <div style="text-align:center;">
      <button class='button button-positive' style="width:120px;height:120px;line-height:120px;">
        Large button
      </button>
    </div>

As you can see, no matter what I did. The height of button image is not correct. But the button with text is ok if I change the size.

image

P.S.: Actually the image shape has nothing to do with the problem.

6

why are you using the tag inside the in first place?

check this out, maybe this helps:

7

Thanks.

For me, it seems the button height is not changeable in ionic no matter I include img or set image as background. That seems to be the reason of my problem. But anyway I’m able to replace all buttons with just normal images in my case. That will resolve my problem.

8

you can override the css with !important like

height: 120px !important

did you try that?

9

Yes. I tried this before.

10

No solution works. Currently I changed all button with image. Although it’s no problem to capture onclick event, there is no way for me to set the disabled status like what button did.