ほとんど何もしないことでアスペクト比サイズの画像を手に入れたらどうでしょうか？

画像の読み込みスタッターを解く：ブラウザのネイティブ機能を使用して、シームレスな画像ディスプレイを実現する

Webページの画像がゆっくりと読み込まれ、ページがutter音を立てる状況に遭遇したことはありますか？これは通常、ブラウザが画像のアスペクト比を知らないため、画像を表示するのに十分なスペースを予約できないためです。この記事では、ブラウザのネイティブ機能を活用して、余分なコードなしでこの問題を解決するエレガントなソリューションについて説明します。

Webページで800x600ピクセルの画像を使用していて、幅をwidth: 100%; 。画像の実際の表示幅は、コンテナサイズによって異なりますが、そのアスペクト比は同じままです。問題は、画像が読み込まれる前にブラウザが画像の高さを決定できないため、ページがst音を発揮することです。

解決策： widthとheight特性を活用してください

驚くべきことに、ちょうど<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174511723380054.jpg" class="lazy" alt="ほとんど何もしないことでアスペクト比サイズの画像を手に入れたらどうでしょうか？">さらに進む：ブラウザネイティブスタイルのサポート

より理想的な解決策は、ブラウザ自体がこの機能をサポートすることです。 1つの方法は、CSSのaspect-ratio属性を活用することですが、これには開発者が手動で追加する必要がありますが、これは十分に便利ではありません。より良い解決策は、デフォルトのアスペクト比設定をブラウザユーザーエージェントStyleSheetに追加することです。

 IMG、ビデオ{
  アスペクト比：attr（width） / attr（height）;
}

このように、画像にwidthとheight属性がある限り、ブラウザは、ロード遅延を避けるために正しいスペースを自動的に計算して予約できます。

このアプローチの利点は次のとおりです。

1. 理解して実装しやすい：新しい属性や複雑なCSSトリックを学ぶ必要はありません。
2. 幅広い適用性：多くのWebサイトは、既存のコードを変更せずにwidthとheight属性を既に使用しています。
3. 開発者フレンドリー：新旧の開発者は、簡単に理解して使用できます。

現在、一部のブラウザはこのソリューションの実現可能性をテストしています。これにより、Web開発が大幅に簡素化され、ユーザーエクスペリエンスが向上します。

以上がほとんど何もしないことでアスペクト比サイズの画像を手に入れたらどうでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。