Şunlar işinize yarayabilir:

aspect-ratio

Genişlik ve yüksekliği korur.
Örnek: img { width: 100px; aspect-ratio: 5/1; } şeklinde genişliği 100px yapar ve yüksekliği de onun 5'te 1'i kadar yapmış olursunuz. (5:1)
Örnek: img { width: 100%; aspect-ratio: 5/1; } şeklinde genişliği kapsayıcının genişliğine eşitlersiniz ve genişlik de yüksekliğin 5 katı olur. (5:1)

object-fit: cover

Görseli genişlik ve yüksekliği dolduracak şekilde boyutlandırarak kırpılmış şekilde gösterir.
Örnek: img { width: 100px; height: 100px; object-fit: cover; } şeklinde img tag'ının genişlik ve yüksekliğini 100x100px yaptık. Görselin boyutu örneğin 250x120px olsa bile görüntü kendini 100px'lik kareyi dolducacak şekilde boyutlandıracaktır.
Örnek: img { width: 100%; aspect-ratio:5/1; object-fit: cover; } şeklinde, img tag'ının genişliğini kapsayıcısının genişliğine eşitledik. Yüksekliğini genişliğinin 5'te 1'i kadar yaptık. Görselin gerçek ebatları ne olursa olsun bu genişlik ve yüksekliği dolduracak şekilde görüntülenmesini istedik.

Büyük ihtimalle bu örnekleri inceleyip kendi kodunuza uyaryarak sorunu çözebilirsiniz.

DÜZELTME

<div> için de aspect-ratio ile en-boy oranı koruyabilirsiniz.
Örnek: div { width:100px; aspect-ratio:5/1; }
Eğer <div> içindeki elementlerin <div>'in dışına taşmasını istemiyorsanız overflow: hidden; diyebilirsiniz.
Örnek: div { width:100px; aspect-ratio:2/1; overflow:hidden; }
Farklı kombinasyonları deneyin lütfen.