css - 为什么这行得通？- 推特引导 2.3.1

Question

我最近发布了一个问题，询问我如何能够垂直对齐响应式图像。我自己找到了答案，但它提出了一个更大的问题，因为我不知道它是如何或为什么起作用的。

看看这个 jsFiddle：http: //jsfiddle.net/fmwzT/1/

它使用以下代码在导航栏中垂直对齐图像：

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 301px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

但是，如果没有 Bootstraps 最新版本（2.3.1），这是行不通的！ 看看这个 jsFiddle：http: //jsfiddle.net/fmwzT/2/

第二个 jsFiddle 不包含 Boostrap 2.3.1，但包含 Boostrap 2.3.0（包含在我称为 layout.css 的外部 css 文件中），但它不起作用。

问题：有谁知道 Twitter Bootstrap 2.3.1 的哪个部分导致导航栏中的图像响应？

Answer 1

这存在于版本 2.3.1 (responsive-combined.css) 中，而不是以前的版本中：

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