CODEWITHSUNDEEP
htmlionic-frameworkionic3
Omar Hussein
Omar Hussein

Reputation: 1147

Ionic 3: Grey(?) horizontal bar under img

Ok so I have a horizontal bar at the bottom of my img, this is not part of the image, I tried cropping, changing from png to jpeg and changing dimensions, this is an excerpt from it's html 

<ion-content padding center text-center>
  <ion-img width="200" height="200" src="assets/imgs/applogo.png"></ion-img>
  <ion-list>
    <ion-item>

and this is how it looks(sorry drew over the logo in red for privacy reasons): enter image description here

It may seem a simple issue but I found no one posting about it online, any help is appreciated.

Upvotes: 1

Views: 74

Answers (1)

99tharun
99tharun

Reputation: 1216

You need to set the exact image dimensions on the ion-img element as mentioned in the official docs

The grey color appears because the ion-img component by default has a grey background color. You've set 200px as the height of your image but it is actually shorter than 200px so the background color of the ion-img element appears below the image.

Upvotes: 2

Related Questions