イメージの表示
丸め：
サークル：
フチ：
テキスト：
自然
丸みを帯びたイメージ
W3-ラウンドクラスは、画像に丸めコーナーを追加します。
丸で囲んだイメージ
W3-円クラスは円に画像を整形します：
フチイメージ
W3-境界クラスは、画像の周囲に境界線を追加します。
Hoverableイメージ
W3-ホバー-不透明度クラスは、マウスオーバーで画像に透明度を追加します。
カードなどの画像
（影を追加）カードとして、それを表示するには、<IMG>要素の周囲にW3-カード- *クラスのいずれかをラップ：
サイモン
すべてのボスのボス
イメージテキスト
W3-display- クラスと画像内のテキストを配置します：
左上
右上
左下
右下
中間
例
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> »それを自分で試してみてください フォトアルバムを構築
この例では、すべてのデバイス上で良く見えるのフォトアルバムを作成するW3.CSS応答グリッドシステムを使用しています。 後でこのについての詳細を学びます。
夏2015
5テッレ
モンテロッソ
ヴェルナッツァ
Manarolaの
コルニリア
リオマッジョーレ
例
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
»それを自分で試してみてください