Wie kann ein Bild richtig an die Breite und Höhe des Containers angepasst werden, ohne dass es verzerrt wird?
Posted: 12 Jan 2025, 14:39
In einer App mit Bootstrap 5 muss ich ein Bild als Banner hinzufügen
HTML
css
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
HTML
Code: Select all
[img]{{ asset([/img]
Code: Select all
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
}
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]