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

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

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

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

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* ie8 */
}</code>

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

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

以上がCSSを使用してブラウザのサイズに合わせて画像のサイズを自動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。