HTML5 の Picture 要素を使用して画像をレスポンシブに処理する方法

いわゆるレスポンシブデザインとは、異なる画面解像度、異なるピクセル密度比、異なる幅を持つ端末デバイスで Web ページのレイアウトを適応的に調整できることを意味します。レスポンシブ デザインの本来の目的は、元の PC ウェブサイトをモバイル端末と互換性のあるものにすることです。ほとんどのレスポンシブ Web ページは、メディア クエリとさまざまなスタイルの CSS ファイルの読み込みを通じて実装されます。このような柔軟なレイアウトにより、さまざまなデバイス端末上で Web サイトのレイアウトがより合理的になります。この記事では主にHTML5のpicture要素のレスポンシブ画像処理の詳細な解説を紹介していますが、編集者が非常に優れていると思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

レスポンシブデザインには多くの利点がありますが、多くの欠点もあります。 PCとモバイル端末は同じWebサイトにアクセスするため、PCではトラフィック制限を気にする必要はありませんが、モバイル端末ではトラフィック制限を無視できません。

さまざまな端末モデルの画面幅とピクセル密度に適応させるために、通常、次の方法を使用して画像の CSS スタイルを設定します:

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

画像の最大幅を 100% に設定して、画像が親要素の幅を超えないようにします。親要素の幅が変更されると、画像の幅も変更されます。画像は、独自の幅と高さの比率に従って拡大縮小されます。

このように、モバイル デバイスでレスポンシブ Web ページの画像にアクセスすると、画像の解像度のみが拡大され、大きな画像が PC にダウンロードされます。これにより、トラフィックが無駄になるだけでなく、帯域幅も無駄になります。 Web ページを開く速度が遅くなり、ユーザー エクスペリエンスに重大な影響を与えます。

新しいソリューション:

1. は HTML5 の新しい要素です

が現在の

現在、Chrome、Firefox、Opera のみと互換性があります:

機能の タグを作成します。

1. 幅 (max-width、min-width) などのメディア属性を追加します。方向 (向き) など;

2. srcset 属性を追加し、属性値は対応する画像ファイル名をロードします。 Retina ディスプレイなど、異なるピクセル密度を提供したい場合は、追加のファイル名を srcset 属性に追加できます

3. 構文