图像在 Chrome 和 IE 中的显示方式不同

Question

这里是新手 Web 开发人员！我在导航栏中嵌入了一个徽标，该徽标在 Chrome 与 IE 版本 10 运行文档标准中的显示方式不同。该页面正在运行引导 CSS。代码如下：

<div class="masthead">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
           <li><img class="" src="img/logo.png" style="height: 50px;"></li> 
                    <li><a href="team.htm">Team</a></li>
                    <li><a href="index.htm">Mission</a></li>
                    <li><a href="charity.htm">Charity</a></li>
                    <li class="active"><a href="#">Events</a></li>
                    <li><a href="past.htm">Past</a></li>
                    <li><a href="talk.htm">Contact</a></li>
                    <li><a href="gallery.htm">Gallery</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /.navbar -->
</div>

在 IE 中，输出是预期的，如下所示（忽略黑框，这是我审查我的雇主）：

在 Chrome 中，它看起来像这样：

bootstrap.css和list下的图片CSS如下：

img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic; }

li {
    line-height: 20px;
}

有谁知道我做错了什么？

编辑：根据多个建议尝试说明宽度，我输入了“宽度：100px;”在 html 代码中的“高度”之后。图像在 IE10 中正确调整大小，但在 chrome 上最大为 64 像素。看Computed Style显示：

Answer 1

尝试像这样给图像尺寸属性：

<img src="img/logo.png" height="50" width="100">

高度和宽度应该是图像的高度和宽度

Answer 2

尝试将图像宽度更改为 100% 可能会有帮助。

尝试像这样改变风格。

width:100%;
background-size:100%;

Answer 3

尝试使用：

img
{
 width: auto;
 height: auto;
 vertical-align: middle;
 border: 0;
 -ms-interpolation-mode: bicubic;
}

代替：

img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}