IE と Edge で「object-fit: cover」の動作を実現するにはどうすればよいですか?

IE と Edge で Object-Fit を使用して画像のアスペクト比の問題を解決する

CSS の object-fit プロパティは広くサポートされているにもかかわらず、 Internet Explorer (IE) や Microsoft Edge などのブラウザでは、画像を拡大縮小するときに望ましくない動作が発生する場合があります。画像の高さではなく幅のサイズが変更され、アスペクト比が歪む場合があります。

この問題に対処するには、次の CSS テクニックを使用できます:

1. 画像を絶対位置内に配置します。そのコンテナ:

   position: absolute;

2. 上、左、および変換プロパティの組み合わせを使用して画像を中央に配置します:

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

3. 画像の方向に応じた画像の高さと幅:

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

このアプローチにより、画像は object-fit: cover の効果を模倣することができ、スケーリング時にアスペクト比が維持されることが保証されます。

このテクニックのライブ デモンストレーションは次のとおりです:

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

このソリューションはブラウザー間互換性があり、画像が確実に表示されます。 IE、Edge、その他の最新のブラウザーでは正しく表示されます。

以上がIE と Edge で「object-fit: cover」の動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。