CSS を使用してブラウザ サイズに合わせて画像のサイズを自動的に変更する

ブラウザ ウィンドウのサイズを変更したときに画像のサイズも自動的に変更したいのですが、提供されているコード機能していません。解決策を調べてみましょう。

画像を柔軟にするには、画像に max-width: 100% と height: auto を追加する必要があります。ただし、IE8 にはこれが機能しないバグがあります。これを修正するには、IE8 の場合は width: auto\\9 を追加します。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

img タグを使用して追加された画像はすべて、自動的にサイズ変更されます。

説明のために、JavaScript を必要としない JSFiddle の例を次に示します。 Chrome、Firefox、IE の最新バージョンと互換性があります (テストに基づく)。