諸先生方、はじめまして。
当方、素人です。
会社のwebショップを立ち上げようとしております。
以下の事で行き詰まり困っております。
宜しければご教授下さいませ。
何卒よろしくお願い申し上げます。


[EC-CUBE] EC-CUBE4.0.5新規インストール

[レンタルサーバ] さくらインターネット

[OS] Windows10

[PHP] 7.4.10 (CGI)

[データベース] mysql57
バージョン5.7

[WEBサーバ] Apache/2.4.46

[ブラウザ] Chrome: 87.0.4280.88
　　　　　 Microsoft Edge
Internet Explorer11

[導入プラグインの有無] 商品おすすめ順並び替えプラグイン for EC-CUBE4、デザインタグ表示プラグイン for EC-CUBE4

[カスタマイズの有無] 写真や文字を変更した程度です。

[現象]　TOPページの横にスライドする、サイズの違う3枚の画像を、ブラウザが違ってもサイズと縦横比を同じにしたいです。Photoshopは使えません。

ChromeとMicrosoft Edgeでは正しくトリミングされ、思い通りに表示されるのですが、Internet Explorer11では画像の縦横比がくずれ、横に伸びてしまっています。

現在、CSSでobject-fitを使い対応しようとしています。
IEでもobject-fitを使えるようにするスクリプトがあるとネットで見つけ、object-fit-imagesのofi.jsファイルをJavaScript管理のコードの所に貼り付けております。やり方が間違っているでしょうか。
ページ管理のtopページのhtml？のところにも、何かコードを入れないといけないのでしょうか。jsファイルを呼び出すための何かとか・・

cssは以下の通りです。高さは450pxにしたいです。

大変申し訳ございませんが、ご教授をよろしくお願い申し上げます。

【CSS】
.ec-sliderRole img {
width: 100%;
height: 450px;
object-fit: cover;
font-family: 'object-fit: cover;';
}