Support » Themes » Responsive Images in Diashow im Theme Header

Responsive Images in Diashow im Theme Header

  • corporal101

    (@corporal101)


    vor 4 Jahren, 2 Monaten

    Ich nutze das Theme „Twenty Seventeen“ auf einer Homepage. Ich habe das Header-Bild durch eine Diashow (Benutze das Plugin „Metaslider“) ersetzt. Dort nutze ich Querformat-Bilder. Jetzt habe ich das Problem, dass die Bilder auf dem mobilen Gerät im Portrait-Format einfach abgeschnitten sind. Wie finde ich da eine Responsive Lösung? D.h. wie kann ich entweder:

    a) die Bilder herunterskalieren, damit sie genau ins Portrait-Format passen und dabei ihr Seitenverhältnis beibehalten?
    b) alternative Hochformat-Bilder benutzen, wenn jemand die Homepage im Portrait-Format auf einem mobilen Endgerät schaut?

    Danke!

    • Dieses Thema wurde geändert vor 4 Jahren, 2 Monaten von corporal101.
Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 4 Jahren, 2 Monaten

    Auch hier fehlt wieder eine URL, wo wir uns die Webseiten selber anschauen könnten. Schade.

    Thread-Starter corporal101

    (@corporal101)

    vor 4 Jahren, 2 Monaten

    Leider ist die Seite aus gutem Grund für Nicht-Administratoren auf „Under Construction“ gestellt. Daher kein Link. Was kann ich stattdessen anbieten?

    Thread-Starter corporal101

    (@corporal101)

    vor 4 Jahren, 2 Monaten

    So, nun habe ich einen Zugang zur Seite als „Gast“ eingebaut. Die Homepage findet ihr hier:

    Experience Flatangert

    Die Zugansdaten lauten:

    ****
    ****
    [Zugangsdaten gelöscht – siehe Moderationshinweis unten]

    Folgendes habe ich nun geändert:

    Das Theme ist auf „Consulting“ geändert worden, weil es von Haus aus einen Slider im Header unterstützt. Ohne CSS Änderungen füllt der Slider inkl Bilder die volle Bildschirmbreite aus, sodass die Höhe so mitskaliert, dass man bei Auflösungen kleiner gleich Full HD scrollen muss, um zum Text auf der Startseite. Das ist so nicht erwünscht. Daher habe ich folgenden CSS-Code eingebaut, um die Breite und Höhe zu begrenzen:

    #slider .rslides img {
	width: 600px;
	height: 450px;

}

.slider-boxed #slider .rslides-inner {
	width: 600px;
	height: 450px
}

#slider .rslides, #slider .rslides li {
	width:600px!important;
	height:450px!important
}

    Dadurch muss man bei niedrigeren Auflösungen nicht mehr scrollen. Allerdings ist es jetzt nicht mehr Responsive. Auf dem Mobilgerät wird rechts ein wesentlicher Teil der Bilder abgeschnitten.

    Wie bekomme ich das hin, dass folgende Kriterien erfüllt sind?

    • Bei niedrigen Auflösungen bis unter 900px in der Höhe muss nicht gescrollt werden, um den Anfang vom Text zu sehen
    • Von den Bildern wird nichts abgeschnitten
    • Auf mobilen Endgeräten sehen die Bilder auch gut aus
    • Die Bilder werden weder merklich gestaucht noch gestreckt

    Vielen Dank!

    Moderationshinweis: Bitte gib hier keine Zugangsdaten, auch wenn das betreffende Account nur eingeschränkte Rechte hat. Bitte beachte auch unseren FAQ-Beitrag dazu: Kannst du mich nicht anrufen oder mal schnell bei mir einloggen?

    • Diese Antwort wurde geändert vor 4 Jahren, 2 Monaten von corporal101.
    • Diese Antwort wurde geändert vor 4 Jahren, 2 Monaten von Bego Mario Garde. Grund: siehe Moderationshinweis
    Thread-Starter corporal101

    (@corporal101)

    vor 4 Jahren, 2 Monaten

    Habe das Ganze jetzt auf eine anderen Homepage gepackt:

    https://mk-xappo.de/

    Moderator Bego Mario Garde

    (@pixolin)

    vor 4 Jahren, 2 Monaten

    Um ein Bild responsive in voller Breite darzustellen, wird die Höhe des Bildes im CSS-Stylesheet auf 100%, die Höhe auf eine automatische Größe auto gesetzt. Dadurch ändert sich aber die Höhe des Bildbereichs. Ist das nicht erwünscht, kann das Bild z.B. als Hintergrund eines Bereichs mit festen Abmessungen angezeigt werden. Hier hast du die Möglichkeit, mit der Eigeneschaft background-size vorzugeben, ob das Bild in den Bereich eingepasst werden soll oder ob der Bereich komplett ausgefüllt werden soll. Beim Einpassen entstehen unschöne weiße Streifen, beim Ausfüllen wird das Bild abgeschnitten. (Schön nachvollziehbar auf dieser Seite: https://www.w3schools.com/css/tryit.asp?filename=trycss3_background-size_contain)

    Um für verschiedene Display-Größen unterschiedliche CSS-Regeln zu nutzen, kannst du Media-Queries einsetzen. Die werden z.B. hier schön erklärt: https://www.mediaevent.de/css/media-query.html

    CSS-Grundkenntnisse können wir hier nicht vermitteln, das würde den Rahmen sprengen und ist ja auch nicht unser Thema; da bist du in einem CSS-Forum besser aufgehoben.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Responsive Images in Diashow im Theme Header“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten