Question

我是整个Bootstrap场景的新手。尝试将图像作为导航栏品牌，并在窗口确实调整大小

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

我也尝试了img-fluid并添加style='width:100%'，但没有任何效果，其大小始终是静态的。

Answer 1

将图像max-width:100%放在图像上

Answer 2

试试这个，

a {
  display: block;
  width: /* depending on how much space you wanted for your navbar-brand */
}

img {
  max-width: 100%;
}

Answer 3

使用您想要添加的图片：

.img-responsive {
    height: auto;    // the height will be in the images correct aspect ratio.
    max-width: 100%; //Keep the image width the same as it's parents container. 
}

Answer 4

您的代码运行良好。我在这里试过相同的代码。请检查。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a class="navbar-brand" href="#"><img alt="Brand" src="http://img.logospectrum.com/dec/dummy-logo.jpg" class="img-responsive" /></a>

Bootstrap响应式图像问题

4 个答案: