徽标无响应Bootstrap 3

Question

有些东西阻止我的徽标响应。我认为我有所有正确的标签......

<div id="row" class="image-responsive">
<a href="default.asp"><img src="images/logo.png" alt="Top Jocks" border="0"></a>
</div>

在overstyle.css中：

#logo {
  max-width:100%;
}
#logo img {
  display: block;
  margin: 0 auto;
  padding: 0px;
}

Page with the problem

提前致谢。 戴夫

Answer 1

1. 正如评论中所述，the .img-responsive class应该应用于图片本身。

     

   通过添加.img-responsive类，可以使Bootstrap 3中的图像响应友好。这会将max-width: 100%;，height: auto;和display: block;应用于图像，以便它可以很好地扩展到父元素。

2. bootstrap.css已包含指令img { border: 0; }。

所以尝试使用

<a href="default.asp"><img class="img-responsive" src="images/logo.png" alt="Top Jocks"></a>

而不是

<div id="row" class="image-responsive">
<a href="default.asp"><img src="images/logo.png" alt="Top Jocks" border="0"></a>
</div>

如果我的解决方案正常工作，您可以从overstyle.css

中删除此代码

#logo {
  max-width:100%;
}
#logo img {
  display: block;
  margin: 0 auto;
  padding: 0px;
}

Answer 2

如果您使用Bootstrap，请使用class

  

IMG响应

或者将css属性提供给您的徽标图像或类，

img {
 width:100%;
 max-width:100%;
}

Answer 3

您需要在img-responsive代码中添加课程img。

<img src="images/logo.png" class="img-responsive" alt="Top Jocks" border="0">