Logo image overflows out of navbar

css, html, ruby, twitter-bootstrap

Solution

Try this:

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

Every image inside `navbar-header` will be scaled to its height.

jsfiddle example: http://jsfiddle.net/YJw4H/

It's always a better practice to resize the image itself to improve the page load speed, by the way. You should also clean your code when you post a question to help people see your issue.

Problem

I am using a Twitter Bootstrap nav bar for this project This is my navbar code: ``` <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> ``` The logo's dimensions are 250 x 250 pixels and it overflows out of the navigation bar. Is there a way to resize it automatically so that it fits within the elements dimensions? Or will I have to resize the image in a graphics editing software?

Original source