图像未调整引导程序 3 的大小

Image not resizing Bootstrap 3

本文关键字：引导程序 调整 图像      更新时间：2023-09-26

我目前正在使用 Bootstrap 3 框架来创建原型，我的网站标题中有一个徽标图像，似乎根本没有调整大小。我已经给了它图像响应类，但它不影响它。

我认为该列可能没有保存图像内容。我创建了一个小提琴（带有谷歌的示例标题图像）

http://jsfiddle.net/pocockn/52VtD/10157/

<!-- navbar and logo -->
<div class="navbar navbar-default" role="navigation">
<div class = "row nav-row">
    <div class="col-md-10">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"><img src ="http://slant.investorplace.com/files/2013/08/pandora-stock-logo.png" class="img-responsive"></a>
                         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
      </div> <!-- end of col md 8 -->
    <div class="col-md-2">
        <div class="navbar-collapse collapse">
            <ul class="nav nav-stacked">
                <li><a href="home.html">ROOMS</a></li>
                <li><a href="about.html">PROFILE</a></li>
                <li><a href="artists.html">CONTACT</a></li>
            </ul>
       </div> <!-- end of col md 4 -->
      </div><!-- end of row -->
    </div><!-- end of container -->

谢谢！

演示 试试这个我在 img 标签中添加了类"徽标"，在标签中添加了"remove_pad"类

 .logo{
    width:100%;
    height:100%;
}
.remove_pad{
    padding:0px !importnat;
}

一种方法是用css直接覆盖你的img：

小提琴 ： http://jsfiddle.net/62uz5odq/

.navbar-brand > img {
    width:auto;
    height:100%;
}
相关文章：