Object-Fit: IE と Edge でカバーが失敗する、修正方法は?

Object-Fit: IE および Edge でカバーが失敗する、修正方法

object-fit: cover; の使用CSS で一貫した画像の高さを維持する機能は、ブラウザ間でシームレスに機能します。ただし、IE と Edge では特有の問題が発生します。ブラウザを拡大縮小すると、画像の高さは拡大されず、幅が変更され、外観が歪みます。

この問題を解決するには、次のような賢い CSS ソリューションを採用します。

<前>位置: 絶対;
上: 50%;
左: 50%;
変換: 変換(-50%, -50%);
高さ: 100%;
幅: 自動; // 垂直ブロックの場合
height: auto;
width: 100%; // 水平ブロックの場合

この組み合わせは、絶対配置を使用して画像を中央に配置し、IE および Edge の object-fit:cover の問題を排除します。画像は歪みのない望ましい効果を維持しながら、比例して拡大縮小されます。

ソリューションの有効性を説明するために、次のデモを検討してください:

画像サイズ変更のデモ

このアプローチにより、すべてのブラウザーで一貫した画像動作が確保され、IE と Edge の object-fit:cover の問題に効果的に対処できます。

以上がObject-Fit: IE と Edge でカバーが失敗する、修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。