ホームページ > ウェブフロントエンド > CSSチュートリアル > IE と Edge で「object-fit: cover;」画像のスケーリングを実現するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-11-02 00:36:02
オリジナル
969 人が閲覧しました

How to Achieve `object-fit: cover;` Image Scaling in IE and Edge?

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

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

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

  1. 次のコードを使用して、コンテナ内に画像を絶対に配置します。
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
ログイン後にコピー

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

  1. に基づいています画像の向き (垂直または水平) に応じて高さと幅のプロパティを設定します:
  • 垂直ブロックの場合 (高さが幅より大きい):

    height: 100%;
    width: auto;
    ログイン後にコピー
  • 水平ブロックの場合 (幅がheight):

    height: auto;
    width: 100%;
    ログイン後にコピー

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート