html - 引导响应图像问题

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

尝试这个，

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

img {
  max-width: 100%;
}

Answer 2

使用您要添加的图像：

.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 3

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

<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>

Answer 4

把图像放在上面max-width:100%，应该工作