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/

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

徽标图像溢出导航栏

1 个答案: