Since you have used the logo with larger image size(width), it gets shrinked on smaller devices as max-width is set 100% which however makes it appear responsive.
So you may use a logo image with smaller dimension however it doesn’t seem it makes much difference.
Hope you are clear.
Thanks for the response. I don’t have a problem with the logo shrinking, but I need the ratio to stay the same. As you can see the height and width don’t shrink equally, the logo is squeezed more horizontally than vertically. How can I fix this?
Yes Exactly! Actually the logo takes the height value auto so the actual width is adjusted according to the device width. If you try by adding a smaller width logo it doesn’t make much difference. Try and let us know.