IE と Edge で「object-fit: cover;」画像のスケーリングを実現するにはどうすればよいですか?

IE および Edge での画像のスケーリングに関する CSS 修正

object-fit: cover; を使用する場合。ページ上の画像の CSS ルールにより、IE または Edge でブラウザを拡大縮小するときに、画像がズームではなく幅 (高さではなく) でサイズ変更されるという問題が発生する可能性があります。これにより、画像が歪んでしまいます。

この問題に対処するには、CSS ソリューションを実装できます。

1. 次のコードを使用して、コンテナ内に画像を絶対に配置します。

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

これにより、コンテナ内の画像が中央に配置されます。

2. に基づいています画像の向き (垂直または水平) に応じて高さと幅のプロパティを設定します:

• 垂直ブロックの場合 (高さが幅より大きい):

  height: 100%;
  width: auto;

• 水平ブロックの場合 (幅がheight):

  height: auto;
  width: 100%;

これにより、画像に目的のオブジェクト フィットが与えられます。この効果により、IE と Edge でのサイズ変更時に比例して拡大縮小されます。

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