1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Responsiv Bild neben Text (srcset)

Dieses Thema im Forum "Mobil mit WordPress" wurde erstellt von maierei.org, 25. Februar 2017.

  1. maierei.org

    maierei.org New Member

    Registriert seit:
    25. Februar 2017
    Beiträge:
    3
    Zustimmungen:
    0
    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/11/10/responsive-images-in-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. rantanplan2000

    rantanplan2000 Well-Known Member

    Registriert seit:
    11. September 2016
    Beiträge:
    169
    Zustimmungen:
    0
    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:

    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.
     
    #2 rantanplan2000, 25. Februar 2017
    Zuletzt bearbeitet: 25. Februar 2017
  3. maierei.org

    maierei.org New Member

    Registriert seit:
    25. Februar 2017
    Beiträge:
    3
    Zustimmungen:
    0
    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. rantanplan2000

    rantanplan2000 Well-Known Member

    Registriert seit:
    11. September 2016
    Beiträge:
    169
    Zustimmungen:
    0
    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:

     
  5. maierei.org

    maierei.org New Member

    Registriert seit:
    25. Februar 2017
    Beiträge:
    3
    Zustimmungen:
    0
    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
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden