ブラウザのサイズ変更時に画像が不当に縮小しないようにするにはどうすればよいですか?

CSS: ブラウザーのサイズ変更時に画像を縮小する

管理パネルから画像を構成する場合、ユーザーは、ブラウザウィンドウのサイズが変更されます。この問題は、CSS プロパティと画像のアスペクト比の間の相互作用を理解することで解決できます。

提供される CSS ルールには、最初は max-width プロパティと height プロパティの両方が含まれており、ブラウザのサイズを変更すると、望ましくない縮小が発生する可能性があります。これを防ぐには、1 つの次元 (通常は最大幅) のみを指定し、もう 1 つの次元を auto に設定する必要があります。

例:

.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
}

このアプローチでは、画像のアスペクト比を調整しながら、利用可能なスペースに合わせて適切に拡大縮小できるようにします。以下の「正しい」例に見られるように、画像は比率を維持し、過度に伸びたり縮んだりしません。

不正解:

max-width: 100%;
width: 100px;
height: 100px;

正解:

max-width: 200px;
height: auto;

以上がブラウザのサイズ変更時に画像が不当に縮小しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。