Как правильно сделать так, чтобы изображение соответствовало ширине и высоте контейнера без искажений? ⇐ CSS

[Anonymous]

В приложении, использующем Bootstrap 5, мне нужно добавить изображение в качестве баннера
html

Код: Выделить всё

[img]{{ asset([/img]

css

Код: Выделить всё

.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}

В приложении, использующем bootstrap 5, мне нужно добавить изображение в качестве баннера.
CSS, которым я делюсь, настраивает изображение в соответствии с содержимым, но с небольшое искажение. Я попробовал несколько комбинаций, но не могу добиться хорошего изображения.
Не могли бы вы подсказать, как решить эту проблему?
обновление 1
Изображение может быть заменено пользователем с помощью компонента, который позволяет это. Изображение не всегда будет иметь точный размер, но может быть очень закрывать. Прикрепляю пример изображения. Что касается размеров, они просто используются в этой HTML-структуре и никакое изображение не фиксируется.

Код: Выделить всё

[img]{{ asset([/img]

Подробнее здесь: https://stackoverflow.com/questions/793 ... he-contain