CSS でブラウザ ウィンドウの変更に応じて画像のサイズを自動的に変更する方法

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

質問: ブラウザのサイズを変更すると、画像のサイズも自動的に調整されたいのですがウィンドウ。ただし、以下のコードは機能しません:

HTML:

<code class="html"><img src="/static/imghwm/default1.png" data-src="img/icon_contact.png" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="img/icon_links.png" class="lazy" alt=""></code>

CSS:

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

回答: ブラウザのサイズ変更に合わせて画像のサイズ変更を有効にするには、次のプロパティを CSS に追加します:

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

これにより、画像が比例して拡大縮小され、ブラウザ ウィンドウのサイズが変更されたときに利用可能なスペースに自動的に調整されます。 .

追加の説明:

max-width: 100% と height: auto の組み合わせにより、画像は親要素の幅を超えずに最大幅まで拡張できます。アスペクト比を維持します。 width: auto9 ハックは特に IE8 をターゲットにしており、それ以外の場合は画像のレンダリング時に max-width が無視されます。

その結果、 を使用して追加された画像はすべて無効になります。タグは「柔軟」になり、ブラウザのサイズ変更に応じてサイズ変更されます。

例:

動作デモについては、次の JSFiddle の例を参照してください: [JSFiddle Link]

このコードは JavaScript を必要とせず、Chrome、Firefox、IE の最新バージョンと互換性があります。

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