从图像中删除白色边框答案

【问题标题】：Remove white border from image从图像中删除白色边框
【发布时间】：2014-07-14 02:47:37
【问题描述】：

尝试过的边框：无；无济于事。

#header .bg
{
float: right;
max-width: 100%;
max-height: 100%;
border: none;
}

现在是 html...

<body>
<div id="header">
<img class="bg" src="http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-    Beach-Landscape-HD.png"> 
</div>

【问题讨论】：

为什么图片名称之间有空格？在图像上看不到任何白色边框。看一看。 jsbin.com/tutiwipo/1/edit 。似乎其他一些 css 样式重叠。
你需要这样的东西吗：jsfiddle.net/WMQVw
你说的是什么白边？我认为您没有提供足够的代码和/或解释来诊断您的问题。 jsfiddle.net/LX6g9/1
@AppleBud 你忘了在你的代码上关闭</div>。
@KheemaPandey，感谢您的指出。 :) .

标签： html css image border

【解决方案1】：

你为什么不使用：

<div id="header" style="background-size:cover; background-image:url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);">

相反？或者，甚至更好：

<div id="header"></div>

CSS：

#header {
    background-size: cover;
    background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
}

【讨论】：

我猜 OP 想在图像上显示轮播效果。这就是他使用<img>标签的原因。

【解决方案2】：

示例，但在 body 标记中包含图像：Live version

HTML：

<body>
   <div id="header">
   </div>
</body>

CSS：

body
{
  background-image: url(http://hdwallpapermania.com/wp-content/uploads/2014/04/Beautiful-Beach-Landscape-HD.png);
  background-repeat: no-repeat;
  background-position: top left
}

【讨论】：

可能有使用<img>元素的目的。
@KheemaPandey 是的，但问题看起来他需要一个无缝的背景图像。这就是我删除<img> 并通过CSS 实现背景的原因。

【解决方案3】：

img 标签是一个替换元素，这意味着默认情况下它的display 设置为inline，这也意味着line-height 值会影响它，这可能就是你有负空间的原因围绕它。

解决方案：在您的img 上添加display: block; 属性。

此外，在您的特定情况下，如果您不使用 CSS Normalize，您应该使用它 - 这将消除由任何其他元素（即主体）引起的任何额外间距。

【讨论】：