Image scaling disproportionally in Android default browser

I’m building a website on top of a WordPress theme called ‘Singular’: Singular demo here

I noticed the logo image gets scaled disproportionally on Android’s default browser, at least on my Galaxy SII with Jelly Bean 4.1. The image width seems correct, but height is too tall. The logo appears squashed. This doesn’t seem to do with any of my modifications, but happens on the demo site too. I’ve mailed the theme provider about this, but deadline is closing in, so I’m trying to find out the solution on my own, too.

I wonder if this is a known Android bug, or something to do with the Singular theme specifically?

Nothing special seems to be going on in the original code:

<body<?php ct_body_id('top'); ?> <?php body_class(); ?>>

    <header>
        <div class="container">
            <?php if($ct_options['ct_text_logo'] == "Yes") { ?>
                <div id="logo" class="content-fade">
                    <h2><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h2>
                </div>
            <?php } else { ?>
                <?php if($ct_options['ct_logo']) { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo $ct_options['ct_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
                <?php } else { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo get_template_directory_uri(); ?>/images/singular-logo.png" alt="WP Singular, a WordPress theme by Contempo" /></a>
                <?php } ?>
            <?php } ?>

I tried to hard code the correct height and width properties to the img tags, but it didn’t solve the problem. I’m not sure what to try next. Any ideas?

Update:
Thanks free3dom. Here’s the end result of the styles applied to that img tag, according to Safari’s Web Inspector:

-webkit-animation-delay: 0.5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.6000000238418579s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: fadein;
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0s;
-webkit-transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: rgb(17, 158, 158);
cursor: auto;
display: block;
float: left;
font-family: 'Open Sans';
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 20px;
line-height: 28px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 100%;
opacity: 1;
outline-color: rgb(17, 158, 158);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-decoration: none;
top: 2px;
vertical-align: baseline;
width: 174px;

Well, width is defined, but height isn’t. Doesn’t Android browser calculate the correct height automatically? Although, hard-coding the width and height values earlier didn’t seem to cure the problem anyways. I better re-check that to be completely sure.

Other than that, anything there that catches your eye? I couldn’t find anything obviously responsible for the problem.