Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Ergebnis 1 bis 5 von 5
Like Tree1Likes
  • 1 Post By rantanplan2000

Thema: Responsiv Bild neben Text (srcset)

  1. #1
    PostRank: 0
    Registriert seit
    25.02.2017
    Beiträge
    3

    Responsiv Bild neben Text (srcset)

    Hallo zusammen,

    seit WP 4.4 erzeugt WP ja automatisch den notwendigen Code für die Anzeige von responsive Bildern (srcset, https://make.wordpress.org/core/2015...wordpress-4-4/) und legt beim Hochladen eines Bildes automatisch zusätzliche kleinere Versionen des Bildes an.

    Nun klappt das bei mir auch im Prinzip wenn ich eine Seite mit nur einem Bild veröffentliche, d.h. ich kann das Browserfenster kleiner ziehen und das Bild wird auch wie gewünscht kleiner.
    Wenn ich allerdings eine Seite mit Bild (linksbündig) und Text rechts neben dem Bild veröffentliche, bleibt das Bild beim Verkleinern des Browserfensters gleich groß. Der Text dagegen macht was er soll und wird immer schmäler.

    Hat jemand einen Tipp für mich?

    Testseite: https://moflitz.de/wordpress/

    Danke & Grüße
    Markus


  2. #2
    PostRank: 3
    Registriert seit
    11.09.2016
    Beiträge
    137
    Das Bild orientiert sich an den Außenkanten. Ein Bild in einem div wird sich, wenn responsiv, immer an der maximalen Größe des div orientieren.
    Der div bzw. der container ist also der maximale Platz der zur Verfügung steht. Erst wenn der Platz für die maximale größe (bildgröße) zu klein wird, verkleinert sich auch das bild.

    Wenn du bild und text in einem div hast, ohne ein childelement zu erzeugen, gibt der text als erstes nach und das bild hat keine kante wo es anstößt. du musst also die maximale größe des bildes mit media queries steuern. das bild ist schon responsiv. das bild nutzt eben 100% breite. das bild sagt praktisch "mein webmaster hat mir befehl gegeben, 100% breite zu nutzen, also mach platz du doofer text, dir kanns ja egal sein!"

    als beispiel:

    @media (min-width: 1200px) {
    img {
    width: 100%;
    }
    }

    @media (min-width: 820px) {
    img {
    width: 80%;
    }
    }
    so wären z.B. alle bilder ab einer bildschirmgröße von mindestens 820px 80% groß. ab 1200px werden die bilder mit 100% breite angezeigt.
    Geändert von rantanplan2000 (25.02.2017 um 22:05 Uhr)

  3. #3
    PostRank: 0
    Registriert seit
    25.02.2017
    Beiträge
    3
    Hallo rantanplan2000,

    danke für den Tipp! - d.h. dann ich muss das mit den media queries im CSS des Themes einbauen - korrekt? Oder kann ich das pro Seite definieren?

    Danke & Gruß
    Markus

  4. #4
    PostRank: 3
    Registriert seit
    11.09.2016
    Beiträge
    137
    Ja, das machst du im CSS.

    Du kannst es auch pro Seite bzw. pro Bild definieren. Dazu gibst du dem jeweiligem Bild eine eingene class und sprichst es dann im css an. Codebeispiel steht ja oben, aber nochmal mit einer klasse:

    @media (min-width: 820px) {
    .nurdas {
    width: 80%;
    }
    }
    <img class="nurdas" src="deinbild.jpg" alt="" />
    SebiJo89 likes this.

  5. #5
    PostRank: 0
    Registriert seit
    25.02.2017
    Beiträge
    3
    Hallo rantanplan2000,

    danke, so einigermaßen habe ich es schon hinbekommen. Zumindest wird das Bild kleiner wenn ich das Browserfenster zusammenschiebe. Dann springt es auf einmal wieder und wird wieder größer. Ich muss mich wohl noch ein wenig herantasten.

    Danke auf jeden Fall für Deine Hilfe!

    Grüße
    Markus

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •