Can't swap out header logo image

For some reason whenever I change the logo images for the header, the image takes up the full header height. This is too big!

This is the previous code:

<div id="logo">
     <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img src="images/logo.png" alt="Canvas Logo"></a>
     <a href="index.html" class="retina-logo" data-dark-logo="images/logo-dark@2x.png"><img src="images/logo@2x.png" alt="Canvas Logo"></a>
</div>

This is mine:

<div id="logo">
	<a href="index.html" class="standard-logo" data-dark-logo="img/headerimage/darklogosm.png"><img src="img/headerimage/whitelogosm.png" alt="Web Design Logo"></a>
	<a href="index.html" class="retina-logo" data-dark-logo="img/headerimage/darklogo@2x.png"><img src="img/headerimage/whitelogo@2x.png" alt="Web Design Logo"></a>
</div>

darklogosm.png is 116px x 25px
whitelogosm.png is 116px x 25px
whitelogo@2x.png is 162px x 35px
darklogo@2x.png is 162px x 35px

The images should not be taking up the entire header, but it stretches out the image!

Do you know how to fix this? I'm out of ideas. Thanks.

I think I figured out why!

The previous "Canvas" image had a blank space on the top and bottom so it would fill header.

Is there a way to do this without changing all of the images, so they are just the height of the logo itself?