Blurry Logo

This issue relates to size and CSS, I am using Twitter Bootstrap for my front-end. I've uploaded a logo (709x134) and this is what's in my style.css file:

Code:

.navbar-brand {
   float: left;
   padding: 12px 15px;
   font-size: 19px;
   line-height: 21px;
   height: 62px;
   max-width: 220px;
   display: table;
}

Should I change anything in here? I've already increased the width by 20 pixels. The logo looks better in Firefox than in Chrome.

Thanks!

Do you have a link to your development site?

I would be tempted to resize the logo to conform to the fixed height specified in the CSS .navbar-brand.

Original size 709x134 and fixed height: 62px;

Did you try to add the Bootstrap img-responsive class to the img?

PHP Code:

<img alt="Brand" class="img-responsive" src="..."> 


What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

You should set the width to auto, and not (max-width: 220px. It is a non-sense to set a height of 62px but a maximum width of 220px;

Website: http://avenir.ro