nDiki

2013年12月3日 (火)

Bootstrap 3 での画像横へのテキスト回り込みと画像のレスポンシブ化

Bootstrap 3 で画像を float: right; するには

 class="pull-right"

を指定。あとスマーフォンのブラウザでの表示時に、端末の画面の横幅より大きい画像がはみださないようにするには

 class="img-responsive"

を指定する。max-width: 100%; と height: auto; がかかるようになる。

ということで、ここの Bootstrap 3 対応作業の続きでコンテンツ中の画像には適宜上のクラス(片方あるいは両方)が指定されるように HTML 生成を修正。画像まわりがいい感じになった。 Bootstrap お手軽。

スポンサード リンク
[ 12月3日全て ]

About Me

Naney Naney

Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

About nDiki

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。

#nNote タグがついている記事は他の記事に比べて、より断片的・未整理・不完全なちょっとしたノートです。まだ結論に至っていない考えなども含まれます。頻繁/大幅に更新したり削除したりすることがあります。

※本サイトの内容は個人的見解であり所属組織とは関係ありません。

Other Notes

ナレッジベースアプリケーション Obsidian で書いているノートの一部を notes.naney.org で 公開しています。

最近検索されている記事

月別インデックス
Process Time: 0.111443s / load averages: 0.48, 0.51, 0.45
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker