Logo "Expands" On Mobile Devices?!?!?!

[Planet13]

Just need a best practices tip for preventing a logo image (png) from getting too BIG on a mobile device.

It looks good on a desktop screen at full width, and it looks fine when you make the window smaller.

But if I use something like opera emulator to simulate a nexus 7 or some other tablet, then it looks larger and pixelated.

Is it best to just set the max-height to the actual height of the image?

(I know that sounds like a stupid question, but just humor me here, people.)

Thanks in advance.

[not2easy]

If you set a height limit, it should be "auto" as in:

img {max-width:100%;height:auto;}

The width is controlled by the image container. I have a link to a mobile emulator: [developer.chrome.com...]
and as an addon (if my notes are right) at: [google.com...]

[Planet13]

Thanks for the response, not2easy

Firstly, I apologize. I should clarify a bit.

Actually the image IS set to:

img {max-width:100%;height:auto;}

Although your tip helped me figure out that the issue was that the image had an ID of "logo", so I was able to look in the appropriate @ media areas for the #logo and set it to the appropriate max-height.

BTW: I went to that chrome mobile emulator. That seems to be the right page, but I don't know how to use it...

I guess I will download and install chrome canary instead.