html - Logo 图像溢出导航栏

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>

Logo 的尺寸为 250 x 250 像素，超出了导航栏。有没有办法自动调整它的大小以使其适合元素尺寸？还是我必须在图形编辑软件中调整图像大小？

Answer 1

试试这个:

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

navbar-header 中的每个图像都将缩放到其高度。

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

顺便说一句，调整图像本身的大小以提高页面加载速度始终是更好的做法。当您发布问题以帮助人们看到您的问题时，您还应该清理代码。