Chrome以不同方式调整div格式

Question

我现在正在使用http://pastebin.com/3CSs2tCA

您可以将其粘贴到此处。 http://htmledit.squarefree.com/

在Firefox中，如果窗口宽度小于786px，则徽标会变小并保持其比例。在Chrome（和我的手机）中，图像会保持高度并且会被压扁。不知道要改变什么来解决它。

Answer 1

感谢Freenode＆＃css频道的善良人士提供答案。

旧代码：

@media only screen and (max-width: 786px) {

#logo {
    vertical-align: middle;
    display: table-cell; 
    height: 100%;
    width: 100%;
    min-width: 75px;
    min-height: 75px;
}

将高度更改为最大高度：100％，宽度更改为自动。

@media only screen and (max-width: 786px) {

    #logo {
        vertical-align: middle;
        display: table-cell;
        max-height: 100%;
        width: auto;
        min-width: 75px;
        min-height: 75px;
    }