css"background-image"显示不需要的边框,img"src"没有

Question

开始使用Twitter Bootstrap,我遇到了一个奇怪的问题,我无法弄清楚原因.

当我使用以下方式渲染图像时:

<img class="img-rounded" id="logo" />

在CSS中:

#logo {
    background-image: url(/Content/Images/logo.png);
}

图像显示为窄边框:

即使我找不到与此效果有关的任何东西.由于img-rounded班级,角落是开放的.

使用以下方式渲染图像:

<img class="img-rounded" id="logo" src="~/Content/Images/SO.png" />

按预期渲染:

我该怎样摆脱边界？CSS代码我试过没有成功:

• border: none;
• color: blue;
• background-color: blue;
• border-style: none;

Answer 1

这应该工作.我认为问题在于img没有src属性的标签.在这种情况下,我们可以简单地使用div标签.

我之前在SO上遇到过这个问题,但我不记得那个问题的链接了.

1)让你的height和width0.

2)根据图像大小给出适当的填充.(即填充:宽度/ 2px高度/ 2px宽度/ 2px高度/ 2px)

简而言之,您的左右填充应该添加到width图像中,并且您的顶部和底部填充应该添加到height图像.

img {
    background: url(http://i.stack.imgur.com/8C4wK.png) no-repeat;
    font-size:0;
    width:0px;
    height:0px;
    padding:36px 99px 36px 99px; /* Since height and width are 0. use appropriate padding. Image is of 197 X 73 dimension. So using 36px on left and right whereas 99px each on top and bottom*/
    border-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<img />

Answer 2

答案是不使用<img>标签并尝试background-image在css中设置.

无论是使用<div>还是<img src="pic.png">和两者的混合无效.

对于指出这一点的rblarsen的信用.