Pure CSS を使用して動的な画像のサイズ変更を実現するにはどうすればよいですか?

CSS を使用した動的画像サイズ変更

レスポンシブ デザインでは、多くの場合、ブラウザーのビューポートの変更に応じて画像のサイズを動的に調整する必要があります。提供されたコードは有望に見えますが、特定のブラウザ、特に Chrome と Safari では問題に直面しています。

これらの問題を克服するには、JavaScript を使用せずに純粋な CSS ソリューションが可能です。画像の動的なサイズ変更を実現する方法は次のとおりです。

まず、画像の最大幅が 100% であることを確認します。これにより、ブラウザ ウィンドウが縮小したときに、元の幅を超えることなく縮小できます。さらに、画像がコンテンツの高さに適応できるように、高さを auto に設定します。

IE8 との互換性を確保するには、プロパティ width: auto9 を含めます。これにより、アスペクト比が狭い画像が IE8 で広くなりすぎないようになります。

画像の最大幅を固定したい場合は、画像をコンテナ内に配置し、その最大幅を指定します。例:

<div>

全体として、max-width:100%、height:auto、width:auto9 (IE8 の場合) を使用すると、CSS を使用した動的な画像サイズ変更のための完全なソリューションが提供されます。この方法は、Chrome、Firefox、IE でシームレスに機能します。

以上がPure CSS を使用して動的な画像のサイズ変更を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。