[ERLEDIGT] Titelbild an Fenstergröße anpassen

[marcovogel108]

Hallo liebe Community,

ich habe mit Bootstrap meine Webseite www.marcovogel108.de erstellt. Nun habe ich das Problem, dass sich die Titelbilder oben beim Menü nicht richtig an die Fensterbreite anpassen und somit immer verzerren...

Kann mir jemand helfen wie ich erreichen kann, dass die Bilder bei kleinen Bildschirmen (z.B. am Smartphone) nach wie vor in den korrekten Proportionen, aber eben kleiner dargestellt werden?

Viele Grüße,

Marco

 

[Sailor]

Die Ursache dafür steht in dem Stylesheet 'carousel.css - dort wird nämlich sowohl für das Bild, wie auch für einen darunter liegenden div Container festgelegt:

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

Beide also eine Höhe von 'height: 500px;' - dadurch ergibt sich diese Verzerrung, wenn die Breite nicht mehr zu der fixierten Höhe passt.
Das Abändern dieser Konstellation könnte schwierig werden, denn wenn man das Bild von dieser Fixierung befreit (zB durch Löschen der 'height:' Angabe oder durch Setzen von 'height: auto;), dann bleibt der div Container weiterhin fixiert und es erscheint bei kleineren Bildschirmen ein hässlicher Streifen unter dem Bild... oder, bei größeren Bildschirmen, das Bild ragt über den Containerrand nach unten hinaus.
Die Höhenangabe des div Containers wegnehmen geht auch nicht, da er dann auf eine Höhe von 0px schrumpft und dadurch der gesamte Seiteninhalt um 500px nach oben rutscht.
Man müsste dann versuchen das Bild nicht mit position: absolute; sondern mit position: relative; einzufügen... damit hätte der div Container einen Inhalt und würde sich an dessen Größe anpassen.
Also Stylesheet ändern in:

.carousel .item {
  background-color: #777;
}
.carousel-inner > .item > img {
  position: relative;
  top: 0;
  left: 0;
  min-width: 100%;
}

Ob diese Lösung allerdings Nebenwirkungen auf andere Elemente der Seite hat, muss dann geprüft werden.

 

[marcovogel108]

DAS ist genau die Lösung, die ich gesucht habe, vielen Dank! :)
An PC Bildschirmen ist das Problem nun gelöst, an SMartphones wird das Bild allerdings immernoch stark verzerrt... Hast du vllt auch noch eine Idee? :)

 

[Gelöschtes Mitglied 36401]

Siehe https://www.w3schools.com/css/css_rwd_mediaqueries.asp

 

[Sailor]

Kann das Problem nicht nachvollziehen. Auf meinem Galaxy und in der Simulation (FireFox) sieht alles gut aus!
Störend nur diese Navigationsleiste - die überdeckt das Bild.

 

[marcovogel108]

Tatsächlich, mein Smartphone hat die Webseite ausm cache geladen -.- Vielen Dank euch :)