画像を収めるために、CSS の max-width 及び height を使用する

適用 (対象)

この達成方法は、カスケーディングスタイルシート / HTML 技術に適用される。

これは達成基準 1.4.10: リフロー (参考) に関連する達成方法である。

解説

この達成方法の目的は、横方向にスクロールすることを目的としたコンテンツの場合、320 CSS ピクセルに相当する幅において横スクロールバーを、又は 256 CSS ピクセルに相当する高さにおいて縦スクロールバーを用いることなく、画像を表示できるようにすることである。これは、画像の元のサイズを維持しつつ使用可能なスペースに収める、CSS の max-width 及び height プロパティ手法を用いることによって行われる。

レスポンシブなレイアウトでは、カラム又はレイアウトブロックを追加したり削除したりできる。さらに、レイアウトの各部分は、さまざまなポイントで幅を広くしたり小さくしたりできる。この手法により、スクロールが発生する1カラムのレイアウトを含めて、画像がレイアウト領域からはみ出すことがなくなる。

画像を収めるための基本原則は次のとおりである:

1. 画像の max-width プロパティを定義する。
2. 画像の height プロパティを定義して、使用可能なスペースで画像を拡大又は縮小し、ズームレベルに応答させる。

全ての画像は、さまざまなビューポートサイズ及びズームレベルで綺麗な見た目を実現するために、元のサイズが利用可能なスペースの最大サイズに確実に収めるよるようにすることによる、デザインの精巧さを必要とする。

事例

<style>

/* Fitting Images Styling */

.img-responsive {
  max-width: 100%;
}

</style>

<div class="panel">
  <img class="img-responsive" src="..." alt="">
  ...
</div>

検証