Wie kann ein Bild richtig an die Breite und Höhe des Containers angepasst werden, ohne dass es verzerrt wird? ⇐ HTML

[Guest]

In einer App mit Bootstrap 5 muss ich ein Bild als Banner hinzufügen
HTML

Code: Select all

[img]{{ asset([/img]

css

Code: Select all

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

In einer App, die Bootstrap 5 verwendet, muss ich ein Bild als Banner hinzufügen
Das von mir freigegebene CSS passt das Bild an den Inhalt an, jedoch mit einem geringe Verzerrung. Ich habe mehrere Kombinationen ausprobiert, aber das Bild sieht nicht gut aus
Könnten Sie mir eine Idee geben, wie ich dieses Problem lösen kann?
Update 1
Das Bild kann vom Benutzer durch eine Komponente ersetzt werden, die dies ermöglicht. Das Bild hätte nicht immer die exakte Größe, könnte aber sehr groß sein schließen. Ich füge ein Beispielbild bei. Bezüglich der Abmessungen wird es einfach innerhalb dieser HTML-Struktur verwendet und es ist kein Bild festgelegt

Code: Select all

[img]{{ asset([/img]