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

【问题标题】：jquery mobile, images have a small black border around themjquery mobile，图像周围有一个黑色的小边框
【发布时间】：2012-07-17 15:18:05
【问题描述】：

我正在使用 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>

【问题讨论】：

你在 CSS 中尝试过border: none; 吗？
+1 表示边框：无；意外的图像边框经常出现，以至于“img {border: none;}”通常是我在主 CSS 文档中所做的第一个声明。
链接或示例将是最有用的！
你能编辑你的问题并添加一些示例代码吗？根据显示的标签/元素将有助于调试此问题
是的，我有。需要进行 CSS 重置。

标签： javascript jquery jquery-mobile

【解决方案1】：

我刚做了这个。这是因为 data-role = "content" 具有 15px 的自动填充。我进入 .css 文件并删除了它。搜索 ui 内容。请记住，在 ui 内容列表视图中，它有 -15，因此也将其更改为 0。

【讨论】：

【解决方案2】：

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

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

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

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

background-size 是 CSS3 中的新内容，因此不受统一支持，但它在 WebKit 和其他几个浏览器中都有。阅读更多：A List Apart: Supersize that Background, Please!

【讨论】：