イメージ

画像表示の形式

角丸

参考画像

サークル

参考画像

サムネイル

参考画像

角丸

.img-rounded クラスは画像に丸みのあるコーナーを追加します(IE8はサポートしません)。

参考画像
<img src="img.jpg" class="img-rounded" alt="参考画像" width="200" height="200">

サークル

.img-circle クラスは画像をサークルで表示します(IE8はサポートしません)。

参考画像
<img src="img.jpg" class="img-circle" alt="参考画像" width="200" height="200">

サムネイル

.img-thumbnail クラスは画像をサムネイル表示します。

参考画像
<img src="img.jpg" class="img-thumbnail" alt="参考画像" width="200" height="200">

レスポンシブ画像

画像は自動的に画面のサイズに合わせて調整されます。
.img-responsive クラスを <img> タグに追加することで、レスポンシブイメージを作成します。イメージは親要素にうまくスケールされます。
.img-responsive クラスは次のCSSを適用します。
display: block;
max-width: 100%;
height: auto;

参考画像
<img src="img.jpg" class="img-responsive img-rounded" alt="参考画像" width="400" height="400">

イメージギャラリー

Bootstrapのグリッドシステムと .thumbnail クラスを組み合わせて画像ギャラリーを作成することもできます。

<div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="#">
        <img src="img.jpg" alt="参考画像" style="width:100%">
        <div class="caption">
          <p>トラクターとは、ラテン語の「引く」という言葉に由来した機械で、単体では動かすことのできないものを動かす牽引車のことを言い、稲作に使われるものは農業用トラクターと呼ばれます。</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="#">
        <img src="img.jpg" alt="参考画像" style="width:100%">
        <div class="caption">
          <p>農業用トラクターは、農業機械などを牽引するだけでなく、農用作業機を取り付けることによって田んぼを耕したり、肥料を散布したりと様々な農作業を行うことが出来ます。</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="#">
        <img src="img.jpg" alt="参考画像" style="width:100%">
        <div class="caption">
          <p>牽引(けんいん)自動車。農作業や土木工事などで、ものをひっぱるのに使う。</p>
        </div>
      </a>
    </div>
  </div>
</div>

レスポンシブな埋め込み

どのデバイスでもビデオやスライドショーを適切なサイズに調整できます。
クラスは <iframe><embed><video><object> 要素に直接適用できます。
次の例では、レスポンシブビデオを作成します。
.embed-responsive-item<iframe> タグに追加します(動画は親要素にうまく調整されます)。 <div> タグで動画のアスペクト比が定義できます。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/B2D3lGOrdVQ"></iframe>
</div>

アスペクト比とは?
アスペクト比は、その幅と高さとの比例関係を表します。 一般的なビデオ縦横比は、4:3(20世紀のビデオフォーマット)と16:9(HDテレビ)です。