.img-rounded クラスは、画像の角に丸みを加えます（IE8は角丸をサポートしていません）：

円

.img-circle クラスは、画像を円形にします (IE8は角丸をサポートしていません)：

サムネイル

.img-thumbnail クラスは、画像の形状をサムネイルにします：

レスポンシブ画像

画像は、すべてのサイズで提供されます。画面にそれを描画します。レスポンシブ・イメージは、画面のサイズに合わせて自動的に調整されます。

<img> タグに .img-responsive クラスを追加することでレスポンシブ画像を作成します。その結果、画像は親要素へ正確に調整されるようになります。

.img-responsive クラスは、画像に display: block;、 max-width: 100%;、height: auto; を適用します：

イメージギャラリー

イメージギャラリーを作成するのに .thumbnail クラスと連携して、 Bootstrap のグリッド·システムを使用することもできます：

例

<div class="row">
<div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
</div>
<div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" style="width:150px;height:150px">
    </a>
</div>
<div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.</p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
</div>
</div>

Try it Yourself »

Responsive Embeds

また、ビデオやスライドショーを、全てのデバイス上で適切にスケーリングします。

クラスは、<iframe>、<embed>、<video>、<object> 要素に直接適用することができます。

次の例は、<iframe> タグに .embed-responsive-item クラスを追加することで、レスポンシブ・ビデオを作成します（その結果、ビデオは親要素へ正確に調整されるようになります）。包含 <div> は、ビデオのアスペクト比を定義します：

アスペクト比とは？

画像のアスペクト比とは、幅と高さの比率を表すものです。 2つの一般的なビデオのアスペクト比は、4:3（20世紀のユニバーサルビデオフォーマット）と、 16:9（HD テレビおよびヨーロッパのデジタルテレビの一般的なビデオフォーマット）の 2つがあります。

2つのアスペクト比率クラスの中から選択することができます：

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bootstrap 画像