jquery mobile, images have a small black border around them

I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with 开发者_C百科a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?

Adding some code:

<div data-role="content" style="background-color: #000000">
    <div id="slogandiv">
    <img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
 </div>

I just did this. It is because that the data-role = "content" has a automated padding of 15px. I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.

A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.

Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:

.container {
  background: url('image.png') no-repeat;
  background-size: contain;
  width: 480px;
  height: 240px
}

… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).

background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!