1

最近、レスポンシブ画像を垂直方向に配置する方法を尋ねる質問を投稿しました。私は自分で答えを見つけましたが、それがどのように、またはなぜ機能するのかわからないため、さらに大きな疑問が生じました.

この jsFiddle を見てください: http://jsfiddle.net/fmwzT/1/

次のコードを使用して、navbar の画像を垂直方向に揃えます。

<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/

この 2 番目の jsFiddle には Boostrap 2.3.1 は含まれていませんが、Boostrap 2.3.0 (layout.css と呼ばれる外部 css ファイル内に含まれています) が含まれていますが、機能しません。

質問: Twitter Bootstrap 2.3.1 のどの部分が原因で navbar 内の画像がレスポンシブになるか知っている人はいますか?

4

1 に答える 1

1

これはバージョン 2.3.1 (responsive-combined.css) にあり、以前のバージョンにはありません。

img {
    height: auto;
    max-width: 100%;
}
于 2013-03-16T02:17:17.937 に答える