バラバラなサイズの画像を同じサイズにして表示する方法

サイズがバラバラな画像をスライダーなどにして同じサイズで表示させたいことが
あったので、いろいろと検索してみました。

実際は思った表示にはならないのですが、イメージに近い表示になりました。

できるだけ同じようなサイズの画像でやることがベストですが、
それができない場合の応急処置としてこちらのサイトの方法で解決できました。
ただし画質はかなり悪くなりますが、、、
また画像もトリミング位置を中央で設定しています。
トリミング位置の変更等を変えたい場合はこちらのサイトをご参照ください。

下記コードはサイトに記載していたものの転記です。

.画像の親要素のクラス名 {
  position: relative;
  overflow: hidden;
  padding-top: 60%; /* 比率 */
}
.画像の親要素のクラス名 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}