Bild geht über das Mobile Design hinaus

Thema wurde von Anonymous, 9. Oktober 2018 erstellt.

  1. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. November 2016
    Beiträge:
    229
    Danke erhalten:
    2
    Danke vergeben:
    60
    Ich habe ein Bild online gestellt.
    Dieses sieht am PC und in der Desktop Version am Handy gut aus und passg genau in das Design.

    In der Mobilen Version geht das Bild jedoch über das Design hinaus wodurch sich alles verschiebt.

    Was muss ich ändern?

    (Link nur für registrierte Nutzer sichtbar.)

    Mobile Version:
    IMG_20181009_230323.jpg
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    27. Mai 2016
    Beiträge:
    457
    Danke erhalten:
    98
    Danke vergeben:
    103
    Du hast das Bild mit festen Pixelbreiten definiert.
    Lösch mal bei den Einstellungen, wenn man im Editor auf das Bild klickt unter Bild bearbeiten, die Breite und Höhe also die Pixel Angaben raus!
     
  3. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. November 2016
    Beiträge:
    229
    Danke erhalten:
    2
    Danke vergeben:
    60
    Habe die Größen heraus genommen, leider ohne Verbesserung...



     
  4. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.694
    Danke erhalten:
    886
    Danke vergeben:
    288
    1. In den Bildeigenschaften unter Breite und Höhe nichts eintragen.

    upload_2018-10-10_0-27-14.png

    2. unter Formatvorlagenklassen "img-responsive" eintragen.
    upload_2018-10-10_0-26-5.png
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. November 2016
    Beiträge:
    229
    Danke erhalten:
    2
    Danke vergeben:
    60
    Super das funktioniert. Einzig: das Bild ist mobile in der mitte. Pc version jedoch linksbündig...

    So sieht der code im editor jetzt aus:

    <h1 style="text-align: center;"><img alt="" class="img-responsive" src="images/halloweenNF18V2.png" style="float: center;" /></h1>



     
  6. Christian Mueller

    Christian Mueller Beta-Held

    Registriert seit:
    4. Juli 2011
    Beiträge:
    3.694
    Danke erhalten:
    886
    Danke vergeben:
    288

    Mach mal aus dem "img-responsive" ein "center-block img-responsive"
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    9. November 2016
    Beiträge:
    229
    Danke erhalten:
    2
    Danke vergeben:
    60
    Perfekt!! Danke!