IE と Edge での「object-fit: cover」問題を修正する方法は?

オブジェクト フィットの修正: IE と Edge でのカバーの問題

この状況では、画像の使用中に一貫した高さを維持することが意図されています。 object-fit: cover では、IE および Edge ブラウザーで問題が発生します。これらのブラウザでは、画像をズームする代わりに画像の幅が変更され、外観が歪んでしまいます。

この問題に対処するには、CSS テクニックを組み合わせて使用​​できます。

1. 画像を中央に配置します: 絶対配置プロパティを使用して、画像をコンテナの中央に配置します。これは次のコードで実現します:

<code class="css">position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

2. 画像サイズを調整します: 画像の向き (垂直または水平) に基づいて、高さを調整します。

<code class="css">// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;</code>

この CSS の組み合わせにより、目的のオブジェクトフィット: カバー効果が可能になり、一貫した高さを維持しながら、IE および Edge ブラウザーで意図したとおりに画像の拡大縮小とズームが保証されます。他のブラウザでは。

以上がIE と Edge での「object-fit: cover」問題を修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。