徽标无响应引导程序 3.

Question

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

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

在过度风格中.css：

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

有问题的页面。

提前谢谢。Dave

Answer 1

1. 如注释中所述，.img-responsive类应应用于图像本身。

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

2. 引导.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>

如果我的解决方案正常工作，您可以从过度样式中删除此代码.css：

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

Answer 2

如果你使用

Bootstrap，那么使用 class

图像响应

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

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

Answer 3

您需要

在img标签中添加类img-responsive。

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