56

新しいバージョン 3.0 ではcol-lg-4 col-sm-4 col-4、画像が同じクラス名を持つ div の一部である場合、画像のクラス名を に設定して、すべてのブレークポイントで画像をレスポンシブにする必要があるようです。

バージョン 2 では、イメージの CSS プロパティはデフォルトで親の div プロパティを継承しました。

これは正しいです？

4

3 に答える 3

13

@BassJobsenによる優れた提案ですが、よりセマンティックな感じがするのでdisplay: inline-block;代わりに使用します1（つまり、他の場所を台無しにしていないことをもう少し確信できることを意味します）。display: block;

したがって、私の場合は次のようになります。

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

私の理解に欠陥がある場合はお知らせください。:)

[1] : ユース ケースの場合、画像はほとんどの場合、ブロック レベルの要素でラップされます。また、段落 (p) などの要素でも画像を使用します。ここでinline-blockは、要素よりも が適していblockます。

于 2013-09-06T08:56:19.390 に答える
0

img-responsiveすべての画像を申請しても安全かどうかを調べた結果、ここにたどり着きました。

p@its_me の回答により、これを要素の下の画像に適用するのは安全ではないと思いました。

これは、ブートストラップ チームが考えていることではないようです。

これが、bootstrap3 でデフォルトで画像が応答しない理由です。

要約すると、多くの無防備なサードパーティ ウィジェット (Google マップを含む) が機能しなくなります。これらのウィジェットは、当然のことながら、ウィジェット内の画像が強制的に他の幅にサイズ変更されることを想定していません。これが、明示的な .img-responsive クラスを優先して、Bootstrap v3 で Bootstrap v2 の「画像はデフォルトでレスポンシブ」アプローチをロールバックした理由です。

https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107

于 2016-02-29T09:39:17.283 に答える