Question

我正在使用jquery mobile，我有一个图像，我想从右到左适合屏幕，没有间隙。但是，如果我只是放置图像而不像<img src="image.png />"那样做任何事情，那么它周围会出现一个小的黑色边框。尽管我在CSS中设置了width=100%，但这仍然存在。我该如何删除此边框？

添加一些代码：

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

Answer 1

对于您的图片，width: 100%的CSS指令仅表示浏览器应以其实际大小显示图像（如果可以），它不会将其拉伸到其他大小。这可以解释为什么你周围有一个轻微的边框，因为图像不能完全缩放到视口的整个宽度。您可以尝试修改img标记的边距和填充设置，但我怀疑最适合您的方法是以不同的方式显示图像。

您是否尝试过操纵包含元素的CSS？假设您有一个名为.container的段落类。你可以这样做：

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

...这将像以前一样使用您的图片，但这次background-size的{{1}}属性会强制它填充父元素的尺寸（我们在上面定义的高度和宽度））。

contain是CSS3中的新功能，因此不是统一支持的，但它在WebKit和其他几个浏览器中。阅读更多：A List Apart: Supersize that Background, Please!

Answer 2

我刚刚这样做了。这是因为data-role =“content”具有15px的自动填充。我进入.css文件并删除了它。搜索ui内容。请记住，在ui-content，listview中，它有-15所以将其更改为0以及。

jquery mobile，图像周围有一个小的黑色边框

2 个答案: