I have an issue rendering a site logo in Internet Explorer 9/10. This code is in the header of all siet page to display the site logo in banner style:

   <!-- Bootstrap core CSS -->
    <link href="/stylesheets/bs/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


<a href="/">
          title="Fishing Charter directory, reviews and more"
          alt="Fishing Charter directory, reviews and more"
          class="img-responsive left-block">
sfc_logo.jpg is 452 x 100 pixels. It renders perfectly, as per the jpg sizing, on all smarterphone and tablet browsers. The same is true for Chrome, Firefox, Safari desktop browsers.

But like clockwork Internet Explorer 9 and 10 are different. IE renders the image horribly large and pixely.

I've tried adding height="100" width="452" attributes but get the same issue.

See the issue on the Smarter Fishing Charters home page

Any help appreciated.