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

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

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

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

解説

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

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

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

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

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

事例

例 1: HTML 及び CSS での適切な画像

次の簡単な例では、適切な画像を作成するために HTML 及び CSS を使用する。ビューポートが調整されると、レイアウト領域は同じようにサイズが調整される。その後、画像はレイアウト領域のコンテナ内に収まるようにサイズが調整される。

複数の方向にスクロールしなくても、ズームレベルを400%まで上げることができる。この例では、画像の max-width にパーセントサイズを使用し、height には自動サイズを使用することにより、元のサイズを維持している。



<style>

/* Fitting Images Styling */

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

</style>

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

実例: Using Fitting Images for Reflow

検証

手順

  1. 400% ズームが可能なユーザエージェントでウェブページを表示し、ビューポートの寸法 (CSS ピクセル単位) を幅 1280、高さ 1024 に設定する。
  2. 400% までズームインさせる。
  3. 水平方向に読まれるコンテンツにおいて、横スクロールしなくても全てのコンテンツや機能が利用可能であることを確認する。
  4. 垂直方向に読まれるコンテンツにおいて、縦スクロールしなくても全てのコンテンツや機能が利用可能であることを確認する。
注記

ブラウザが 400% までズームできない場合は、ブラウザ幅を比例して小さくすることによって検証できる。例えば、300% ズームの場合、ビューポートの寸法は 960 ピクセル幅にすべきである。

期待される結果

3. 及び 4. の結果が真である。