object-fit: cover;
特定のページの画像は同じ場所に固定する必要があるため、CSS で を使用していますheight
。ほとんどのブラウザで問題なく動作します。
しかし、IE または Edge でブラウザを拡大縮小すると、画像はズームされるのではなく、 width
(ではなくheight
)でサイズ変更されます。画像の形が崩れてしまいます。
これを修正するにはどの CSS ルールを使用できますか?
こちらはページ
ベストアンサー1
私も同様の問題を抱えていました。CSSだけ。
基本的にObject-fit: cover
IE では動作せず、幅 100%、高さ 100% となり、アスペクト比が歪んでいました。つまり、Chrome で見られた画像のズーム効果はありませんでした。
私が採用したアプローチは、コンテナ内に画像を配置することでした。絶対その後真ん中に置く次の組み合わせを使用します:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
中央に来たら、イメージに
// 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%;
これにより、画像に Object-fit:cover の効果が適用されます。
上記のロジックのデモンストレーションを以下に示します。
https://jsfiddle.net/furqan_694/s3xLe1gp/
このロジックはすべてのブラウザで機能します。