IE および Edge での Object-Fit: カバーの歪みを修正する方法?

IE および Edge での Object-Fit: カバーの歪みの解決

CSS の object-fit: cover; を使用して、特定の画像が一貫した高さを維持する必要がある状況。プロパティを使用すると、IE および Edge ブラウザで問題が発生する可能性があります。ブラウザを拡大縮小すると、画像はズームではなく幅が変更され、歪みが発生します。

これを解決するには、次の CSS アプローチを検討してください。

1. 画像をコンテナ内に絶対的に配置します。

<code class="css">position: absolute;</code>

2. 次の組み合わせを使用して画像を中央に配置します:

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

3. 画像の次の寸法を設定します:

<code class="css">// For vertical blocks (height greater than width):
height: 100%;
width: auto;

// For horizontal blocks (width greater than height):
height: auto;
width: 100%;</code>

このアプローチは、object-fit: cover; の効果をエミュレートします。また、IE や Edge を含むすべてのブラウザで一貫した動作が保証されます。

実際のデモについては、以下を参照してください。

https://jsfiddle.net/furqan_694/s3xLe1gp/

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