徽标图像溢出导航栏

Question

我正在为这个项目使用Twitter Bootstrap导航栏

这是我的导航栏代码:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand"><%= image_tag('Logo.jpg') %></a>
    </div>

    <div class="navbar-container-right">  
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",    root_path %></li>
        <li><%= link_to "About",    about_path %></li>
        <li><%= link_to "Contact",    contact_path %></li>
        <li>  
            <% if current_user.present? %>
                <%= link_to 'Sign Out',destroy_user_session_path, :method => :delete %>
            <% else %>
                <%= link_to 'Sign In', new_user_session_path %>
        </li>
        <li><%= link_to 'Register Now!', new_user_registration_path %><% end %></li>
      </ul>
    </div>
  </div><!-- /.container-fluid -->
</nav>

徽标的尺寸为250 x 250像素,溢出导航栏.有没有办法自动调整大小以使其适合元素尺寸？或者我是否必须在图形编辑软件中调整图像大小？

Answer 1

试试这个:

.navbar-header img {
    max-height: 100%;
    width: auto;
}

里面的每个图像navbar-header都会缩放到它的高度.

jsfiddle示例:http://jsfiddle.net/YJw4H/

顺便说一下,调整图像本身以提高页面加载速度总是更好的做法.当您发布问题以帮助人们查看您的问题时,您还应该清理代码.