ブートストラップ画像

❮ 前次 ❯

ブートストラップ画像の形状

丸い角：

丸：

サムネイル：

丸い角

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

例

丸

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

例

サムネイル

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

例

レスポンシブ画像

画像にはすべてのサイズがあります。スクリーンもそうです。レスポンシブ画像は、画面のサイズに合わせて自動的に調整されます。

タグに.img-responsiveクラスを追加して、レスポンシブ画像を作成します。<img>その後、画像は親要素に合わせて適切に拡大縮小されます。

.img-responsiveクラスは、および画像に適用display: block;さmax-width: 100%;れ height: auto;ます。

例

イメージギャラリー

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

私は恐怖で私のドアで妊娠しなくなるまで彼を愛するつもりです。

注：グリッドシステムについては、このチュートリアルの後半で詳しく説明します（列の数が異なるレイアウトを作成する方法）。

例

<div class="row">
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
<div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
</div>
</div>

レスポンシブ埋め込み

また、ビデオやスライドショーをどのデバイスでも適切に拡大縮小できるようにします。

クラスは、<iframe>、<embed>、<video>、および<object>要素に直接適用できます。

The following example creates a responsive video by adding an .embed-responsive-item class to an <iframe> tag (the video will then scale nicely to the parent element). The containing <div> defines the aspect ratio of the video:

Example

What is aspect ratio?

The aspect ratio of an image describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century), and 16:9 (universal for HD television and European digital television).

You can choose between two aspect ratio classes:

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

Complete Bootstrap Image Reference

For a complete reference of all image classes, go to our complete Bootstrap Image Reference.

❮ Previous Next ❯

ブートストラップ3チュートリアル

ブートストラップグリッド

ブートストラップテーマ

ブートストラップの例

ブートストラップCSS参照

ブートストラップJSRef

ブートストラップ画像