我正在为此项目使用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像素，溢出到导航栏中。有没有一种方法可以自动调整其大小以使其适合元素尺寸？还是需要在图形编辑软件中调整图像大小？
尝试这个：
.navbar-header img {
max-height: 100%;
width: auto;
}
内部的每个图像navbar-header都会缩放到其高度。
jsfiddle示例：http：//jsfiddle.net/YJw4H/
顺便说一句，调整图像本身的大小以提高页面加载速度始终是更好的做法。当您发布问题以帮助人们看到您的问题时，您还应该清除代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句